Корректное удаление из DOM

Isotope — это мощная библиотека для динамической организации сетки элементов на странице с возможностью фильтрации, сортировки и анимации. Одним из ключевых аспектов работы с Isotope является правильное управление DOM, особенно когда требуется удалять элементы из сетки. Некорректное удаление может привести к нарушению анимаций, сбою фильтров или неправильному отображению элементов.

Метод `remove` в Isotope

Isotope предоставляет встроенный метод remove для удаления элементов. Он позволяет безопасно удалить элементы из DOM и одновременно обновить внутреннее состояние Isotope.

// Получение экземпляра Isotope
var iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  layoutMode: 'masonry'
});

// Удаление элементов с классом .grid-item-to-remove
var elements = document.querySelectorAll('.grid-item-to-remove');
iso.remove(elements);
iso.layout(); // Обновление сетки после удаления

Особенности метода remove:

Принимает один или несколько DOM-элементов или NodeList.
Автоматически обновляет внутренний массив элементов Isotope, что предотвращает появление “мертвых” ссылок на удалённые элементы.
Необходимо вызывать метод layout после удаления, если требуется немедленное перераспределение сетки.

Корректное удаление с анимацией

Isotope поддерживает анимацию при удалении элементов. Для этого нужно использовать CSS-переходы вместе с методом remove.

.grid-item {
  transition: transform 0.4s, opacity 0.4s;
}
.grid-item.isotope-hidden {
  opacity: 0;
  transform: scale(0.5);
}

var itemToRemove = document.querySelector('.grid-item-to-remove');
itemToRemove.classList.add('isotope-hidden');

setTimeout(function() {
  iso.remove(itemToRemove);
  iso.layout();
}, 400); // Задержка соответствует времени CSS-перехода

Такой подход позволяет плавно анимировать исчезновение элементов перед их физическим удалением из DOM.

Использование фильтров при удалении

Удаление элементов должно учитывать текущие фильтры. Если элемент фильтруется через Isotope, его удаление без обновления фильтров может вызвать визуальные артефакты. Рекомендуется:

Снять фильтр перед удалением:

iso.arrange({ filter: '*' }); // Показывает все элементы
iso.remove(element);
iso.layout();

Или учитывать фильтр при удалении, чтобы сетка автоматически корректировалась:

element.classList.add('isotope-hidden');
iso.remove(element);
iso.layout();

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

Метод remove позволяет передавать сразу несколько элементов. Например:

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

Важно убедиться, что передаваемый NodeList не пуст, иначе метод не выполнит никаких действий и не выдаст ошибку.

Работа с событиями при удалении

При удалении элементов через Isotope можно использовать события для выполнения дополнительных действий:

removeComplete — вызывается после завершения удаления и перераспределения сетки.

iso.on('removeComplete', function(removedItems) {
  console.log('Удалены элементы:', removedItems);
});

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

Частые ошибки при удалении

Прямое удаление через parentNode.removeChild без iso.remove Это оставляет элемент в массиве Isotope и нарушает анимацию, фильтры и сортировку.
Не вызван layout после удаления Сетка может остаться с пустыми местами, элементы сместятся некорректно.
Удаление элементов, которые уже скрыты через фильтр без обновления состояния Может привести к тому, что Isotope “думает”, что элемент всё ещё отображается.