remove

Библиотека Packery для JavaScript позволяет создавать динамические сетки с возможностью перетаскивания и автоматического упорядочивания элементов. Одной из часто используемых операций является удаление элементов из сетки, что требует понимания внутреннего механизма управления элементами.

Основные методы удаления

Packery предоставляет несколько способов удалить элемент:

  1. Метод remove Метод remove позволяет удалить один или несколько элементов из сетки. Синтаксис следующий:
// packery - экземпляр Packery
packery.remove(elem);
packery.remove([elem1, elem2, elem3]);
  • elem — DOM-элемент или объект jQuery, который требуется удалить.
  • После вызова remove элемент исключается из внутреннего массива items Packery, но не удаляется из DOM. Для полного удаления из DOM используется метод element.remove():
packery.remove(elem);
elem.parentNode.removeChild(elem); // или elem.remove() в современных браузерах
  1. Метод destroy с удалением элементов Если нужно удалить все элементы и полностью уничтожить экземпляр Packery, можно использовать метод destroy:
packery.destroy();

Опционально можно перед удалением пройтись по массиву элементов и удалить их из DOM.

Обновление сетки после удаления

После удаления элементов важно вызвать метод layout, чтобы Packery пересчитал позиции оставшихся элементов и восстановил корректное расположение:

packery.remove(elem);
packery.layout();

Это особенно важно, если сетка содержит элементы с разной высотой или шириной, так как Packery рассчитывает оптимальное заполнение пространства при каждом обновлении.

Удаление с анимацией

Packery интегрируется с библиотекой Outlayer и позволяет применять анимацию при удалении элементов:

// Удаляем элемент с анимацией
packery.remove(elem);
packery.layout();

Для плавной анимации можно комбинировать Packery с CSS-переходами:

.grid-item {
  transition: transform 0.4s, opacity 0.4s;
}

При удалении элемента его opacity можно плавно уменьшить до нуля перед удалением из DOM:

elem.style.opacity = 0;
setTimeout(() => {
  packery.remove(elem);
  elem.remove();
  packery.layout();
}, 400);

Удаление элементов по событию

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

grid.addEventListener('click', function(event) {
  var target = event.target.closest('.grid-item');
  if (target) {
    target.style.opacity = 0;
    setTimeout(() => {
      packery.remove(target);
      target.remove();
      packery.layout();
    }, 300);
  }
});

В этом примере:

  • Используется делегирование событий для динамических элементов.
  • Плавное исчезновение реализовано через CSS-переход и задержку перед удалением из DOM.
  • layout обновляет сетку после удаления.

Работа с массивом элементов

Packery позволяет удалять сразу несколько элементов, передав массив:

var itemsToRemove = Array.from(document.querySelectorAll('.grid-item.remove'));
itemsToRemove.forEach(elem => {
  elem.style.opacity = 0;
});
setTimeout(() => {
  packery.remove(itemsToRemove);
  itemsToRemove.forEach(e => e.remove());
  packery.layout();
}, 400);

Это удобно для массового удаления, например, при фильтрации или очистке сетки.

Учет динамически добавленных элементов

Если элементы добавлялись после инициализации Packery через метод append:

packery.append(newElem);
packery.layout();

Их также можно удалять стандартным способом — remove и layout. Packery автоматически обновляет внутреннюю структуру и корректно перераспределяет оставшиеся элементы.

Особенности удаления элементов

  • Удаление не ломает сетку — Packery пересчитывает позиции оставшихся элементов.
  • DOM-элемент не удаляется автоматически — требуется самостоятельное удаление через remove() или parentNode.removeChild().
  • Анимация управления позициями — при вызове layout оставшиеся элементы плавно переставляются на новые позиции.
  • Работа с массивами — метод remove принимает как одиночные элементы, так и массив DOM-узлов.

Удаление элементов в Packery — это комбинация корректного управления DOM и вызова методов сетки. Соблюдение последовательности remove → DOM removal → layout обеспечивает стабильное и предсказуемое поведение сетки при динамических изменениях.

Оглавление