Метод remove

Метод remove библиотеки Muuri предназначен для удаления элементов из сетки. Он является ключевым инструментом при динамическом управлении контентом, когда требуется удалять элементы без полного перерисовывания сетки.

Синтаксис метода

grid.remove(elements, options)

  • elements — один или несколько элементов, которые необходимо удалить. Может быть:

    • DOM-элемент (HTMLElement)
    • массив DOM-элементов (HTMLElement[])
    • коллекция NodeList (NodeList)
    • Muuri Item или массив Item объектов (Item / Item[])

  • options — объект с дополнительными настройками удаления:

    • removeElements (boolean, по умолчанию true) — удалять ли DOM-элементы из документа после удаления из сетки.
    • layout (boolean, по умолчанию true) — пересчитывать сетку после удаления.
    • instant (boolean, по умолчанию false) — удалить элемент мгновенно без анимации.
    • sort (boolean, по умолчанию true) — выполнять сортировку оставшихся элементов после удаления.
    • filter (function) — функция фильтрации, которая должна возвращать true, если элемент можно удалить.

Примеры использования

Удаление одного элемента с анимацией

const item = grid.getItem(element);
grid.remove(item);

В этом примере элемент плавно исчезнет из сетки, а оставшиеся элементы автоматически займут его место с анимацией.

Удаление нескольких элементов без удаления из DOM

const elements = document.querySelectorAll('.grid-item');
grid.remove(elements, { removeElements: false });

Элементы будут удалены из сетки, но останутся в DOM. Это удобно для временного скрытия элементов без разрушения структуры документа.

Мгновенное удаление элемента без анимации

grid.remove(item, { instant: true });

При использовании параметра instant: true элемент исчезает сразу, без плавной анимации, что ускоряет операции с большим количеством элементов.

Удаление с фильтрацией

Метод remove поддерживает фильтры через функцию filter:

grid.remove(grid.getItems(), {
  filter: item => item.getElement().classList.contains('delete')
});

В этом примере удаляются только элементы, у которых есть класс delete. Остальные элементы сетки остаются нетронутыми.

Особенности работы метода

  1. Синхронизация с DOM По умолчанию метод не только удаляет элемент из сетки, но и полностью из DOM. Если требуется оставить элемент в документе, нужно явно указать removeElements: false.

  2. Перерасчёт сетки После удаления элемента сетка автоматически пересчитывает позиции оставшихся элементов, если layout: true. Это позволяет сохранять корректное расположение элементов без необходимости вручную вызывать grid.layout().

  3. Возврат значений Метод возвращает массив удалённых объектов Item. Это может быть полезно для последующей работы с удалёнными элементами или их восстановления в сетку.

const removedItems = grid.remove(elements);
console.log(removedItems); // массив Item объектов
  1. Удаление элементов, ещё не добавленных в сетку Если передать элемент, который не был добавлен в сетку, Muuri проигнорирует его и не выбросит ошибку. Это обеспечивает стабильность кода при динамическом добавлении и удалении элементов.

Практические советы

  • При работе с большим количеством элементов лучше использовать опцию instant: true, чтобы ускорить процесс удаления без лишней анимации.
  • Для временного скрытия элементов рекомендуется устанавливать removeElements: false и затем повторно добавлять элементы через метод add.
  • Метод remove хорошо сочетается с фильтрацией и сортировкой элементов, что позволяет создавать сложные динамические интерфейсы, например, списки задач с возможностью массового удаления.

Метод remove является фундаментальным для динамического управления сеткой Muuri, обеспечивая гибкость, контроль над DOM и плавное взаимодействие с пользователем.

Оглавление