Удаление множества элементов

Masonry — это библиотека для создания динамических сеток с поддержкой плотного позиционирования элементов. Часто возникает необходимость удалять сразу несколько элементов из сетки, корректно обновляя её расположение и анимацию. Рассмотрим этот процесс детально.

Методы удаления элементов

Masonry предоставляет два ключевых метода для удаления элементов:

  1. remove — удаляет элементы из DOM и обновляет сетку.
  2. reloadItems + layout — используется для пересчета позиций после удаления элементов вручную.
Пример удаления с помощью remove
// Инициализация Masonry
var grid = document.querySelector('.grid');
var msnry = new Masonry(grid, {
  itemSelector: '.grid-item',
  columnWidth: 200,
  gutter: 10
});

// Получение элементов для удаления
var itemsToRemove = grid.querySelectorAll('.remove-me');

// Удаление элементов из Masonry
msnry.remove(itemsToRemove);

// Обновление расположения сетки
msnry.layout();

Ключевые моменты:

  • remove принимает NodeList, массив элементов или одиночный элемент.
  • После удаления необходимо вызвать layout() для корректного перерасчета сетки.
  • Элементы будут физически удалены из DOM, поэтому важно заранее сохранить ссылки, если они понадобятся.

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

Для плавного исчезновения элементов перед удалением можно использовать CSS-переходы:

.grid-item {
  transition: opacity 0.3s ease;
}

.grid-item.removing {
  opacity: 0;
}
var itemsToRemove = grid.querySelectorAll('.remove-me');

itemsToRemove.forEach(function(item) {
  item.classList.add('removing');
});

// Ждем окончания анимации, затем удаляем из Masonry
setTimeout(function() {
  msnry.remove(itemsToRemove);
  msnry.layout();
}, 300);

Особенности:

  • Используется класс .removing для управления анимацией через CSS.
  • Задержка должна соответствовать длительности CSS-перехода.
  • После удаления Masonry автоматически пересчитает позиции оставшихся элементов.

Удаление элементов на основе условий

Часто требуется удалять элементы динамически по определённым критериям, например, по классу или атрибуту:

var items = grid.querySelectorAll('.grid-item');

items.forEach(function(item) {
  if (item.dataset.status === 'obsolete') {
    msnry.remove(item);
  }
});

msnry.layout();

Примечания:

  • Можно использовать любые селекторы CSS или условия для фильтрации элементов.
  • После каждой серии удалений желательно вызвать layout() один раз для оптимизации производительности.

Оптимизация при удалении большого количества элементов

При удалении десятков или сотен элементов одновременно есть несколько рекомендаций:

  1. Группировка операций

    • Удалять все элементы одной группой вместо последовательного вызова remove для каждого.
    • Это сокращает количество перерасчетов сетки.

  2. Использование remove с NodeList или массивом

    • Masonry обрабатывает массив быстрее, чем отдельные элементы по одному.

  3. Минимизация вызова layout()

    • Вызывать layout() только один раз после удаления всех элементов, чтобы избежать лишних перерисовок.
var itemsToRemove = Array.from(grid.querySelectorAll('.grid-item.remove-me'));
msnry.remove(itemsToRemove);
msnry.layout();

Важные нюансы

  • После удаления элемента из DOM ссылки на него становятся недействительными.
  • Masonry хранит внутренний массив элементов (msnry.items), который автоматически обновляется при использовании remove.
  • Если элементы удаляются не через remove, а вручную через removeChild или innerHTML = '', необходимо вызвать reloadItems() и layout():
grid.innerHTML = ''; // удаление вручную
msnry.reloadItems();
msnry.layout();
  • Для динамических сеток, где элементы добавляются и удаляются часто, рекомендуется сочетать append и remove с корректными вызовами layout() для оптимизации производительности.

Эти приёмы позволяют управлять сеткой Masonry гибко и эффективно, обеспечивая корректное удаление множества элементов с минимальными затратами ресурсов и плавной анимацией.

Оглавление