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

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

Packery поддерживает корректное удаление элементов с последующим перераспределением оставшихся элементов в сетке. После удаления библиотека автоматически пересчитывает позиции и устраняет пустые пространства.

Метод remove

Удаление элементов выполняется методом remove. Он удаляет переданные DOM-элементы из системы управления Packery.

Синтаксис:

pckry.remove( elements )

Параметр elements может принимать:

  • DOM-элемент
  • массив элементов
  • NodeList
  • результат querySelectorAll

Пример удаления одного элемента:

var elem = document.querySelector('.grid-item');
pckry.remove(elem);

После вызова метода Packery удаляет элемент из внутреннего массива управляемых элементов.

Необходимость перерасчёта сетки

Метод remove не выполняет автоматическую переракладку элементов. Для корректного обновления интерфейса требуется вызвать layout().

pckry.remove(elem);
pckry.layout();

Последовательность действий:

  1. элемент удаляется из системы Packery
  2. выполняется перерасчёт расположения оставшихся элементов

Полный пример удаления

HTML:

<div class="grid">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
</div>

Jav * aScript:

var grid = document.querySelector('.grid');

var pckry = new Packery(grid, {
  itemSelector: '.grid-item',
  gutter: 10
});

var item = grid.querySelector('.grid-item');

pckry.remove(item);
pckry.layout();

После выполнения:

  • элемент удаляется из DOM
  • оставшиеся элементы перестраиваются

Удаление нескольких элементов

Метод remove может принимать коллекцию элементов.

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

pckry.remove(items);
pckry.layout();

В этом случае:

  • Packery удаляет все переданные элементы
  • сетка перестраивается один раз после вызова layout

Это эффективнее, чем удалять каждый элемент отдельно.

Удаление с использованием массива

Элементы также можно передать в виде массива.

var items = [
  document.querySelector('#item1'),
  document.querySelector('#item2')
];

pckry.remove(items);
pckry.layout();

Удаление после пользовательского действия

На практике удаление часто привязывается к кнопкам или другим элементам интерфейса.

HTML:

<div class="grid-item">
  <button class="remove">×</button>
</div>

Jav * aScript:

grid.addEventListener('click', function(event) {

  if (!event.target.matches('.remove')) return;

  var itemElem = event.target.closest('.grid-item');

  pckry.remove(itemElem);
  pckry.layout();

});

Алгоритм работы:

  1. пользователь нажимает кнопку удаления
  2. определяется родительский элемент .grid-item
  3. элемент передаётся в remove()
  4. выполняется переракладка сетки

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

Для более плавного интерфейса элементы можно сначала анимировать, а затем удалить.

CSS:

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

.grid-item.is-removing {
  opacity: 0;
}

Jav * aScript:

var item = document.querySelector('.grid-item');

item.classList.add('is-removing');

item.addEventListener('transitionend', function() {
  pckry.remove(item);
  pckry.layout();
});

Последовательность:

  1. элемент получает класс анимации
  2. происходит плавное исчезновение
  3. после завершения анимации элемент удаляется из Packery
  4. сетка перестраивается

Полное удаление из DOM

Метод remove удаляет элементы из DOM автоматически. Дополнительный вызов element.remove() не требуется.

Внутри Packery выполняются два действия:

  • элемент удаляется из внутреннего массива items
  • элемент удаляется из DOM-контейнера

Удаление при динамической фильтрации

Иногда требуется временно удалить элементы из сетки на основе условий.

Пример удаления элементов определённой категории:

var items = grid.querySelectorAll('.grid-item[data-type="old"]');

pckry.remove(items);
pckry.layout();

После этого сетка будет состоять только из оставшихся элементов.

Повторное добавление элементов

Удалённые элементы можно сохранить и позже добавить обратно с помощью appended.

var removedItem;

var item = document.querySelector('.grid-item');

removedItem = item;

pckry.remove(item);
pckry.layout();

Позднее:

grid.appendChild(removedItem);

pckry.appended(removedItem);

Внутренний механизм удаления

Когда вызывается remove, Packery выполняет несколько операций:

  1. находит соответствующий объект Item
  2. удаляет его из массива items
  3. очищает служебные данные позиционирования
  4. удаляет DOM-элемент
  5. освобождает занимаемое пространство

После вызова layout() происходит:

  • повторный расчёт позиций
  • перераспределение элементов

Массовое удаление

Если требуется удалить большое количество элементов, важно избегать множественных вызовов layout.

Неправильный вариант:

items.forEach(function(item) {
  pckry.remove(item);
  pckry.layout();
});

Это вызывает перерасчёт для каждого элемента.

Оптимальный вариант:

pckry.remove(items);
pckry.layout();

Переракладка выполняется один раз.

Очистка всей сетки

Для полного удаления всех элементов можно использовать следующий подход:

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

pckry.remove(items);
pckry.layout();

После выполнения контейнер останется пустым.

Удаление с задержкой

Иногда элементы удаляются через определённое время.

setTimeout(function() {

  var item = document.querySelector('.grid-item');

  pckry.remove(item);
  pckry.layout();

}, 2000);

Этот подход используется для:

  • автоудаления уведомлений
  • временных карточек
  • динамических сообщений

Комбинирование с другими методами Packery

Удаление часто используется совместно с другими операциями:

Операция Метод
добавление элементов appended()
перерасчёт сетки layout()
сортировка shiftLayout()
управление перетаскиванием bindDraggabillyEvents()

Типичный цикл динамического интерфейса:

  1. добавление элемента
  2. перемещение
  3. удаление
  4. переракладка

Обработка отсутствующих элементов

Перед удалением желательно проверять существование элемента.

if (item) {
  pckry.remove(item);
  pckry.layout();
}

Это предотвращает ошибки при работе с динамическими интерфейсами.

Частые ошибки

Отсутствие layout()

pckry.remove(item);

Без переракладки остаются пустые пространства.

Правильный вариант:

pckry.remove(item);
pckry.layout();

Удаление напрямую через DOM

item.remove();

В этом случае Packery не узнаёт об удалении элемента, и внутреннее состояние нарушается.

Правильный вариант:

pckry.remove(item);

Множественные перерасчёты

items.forEach(function(item) {
  pckry.remove(item);
  pckry.layout();
});

Следует удалять элементы группой.

Практические сценарии использования

Удаление элементов Packery активно применяется в следующих интерфейсах:

  • доски задач (kanban)
  • панели виджетов
  • галереи изображений
  • карточные интерфейсы
  • системы уведомлений
  • интерактивные каталоги

Благодаря автоматическому перераспределению элементов сетка сохраняет плотную упаковку без пустых областей.

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

После удаления элемента Packery выполняет перераспределение по принципу bin-packing:

  • элементы перемещаются вверх
  • пустоты устраняются
  • свободное пространство используется максимально эффективно

Это обеспечивает компактное расположение элементов без ручного управления координатами.

Оглавление