Метод remove

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

Синтаксис

$grid.isotope('remove', $items)
  • $grid – jQuery-объект контейнера Isotope.
  • $items – jQuery-объект или массив DOM-элементов, которые нужно удалить.

Метод не требует перезапуска Isotope после удаления: библиотека автоматически пересчитывает позиции оставшихся элементов и анимирует их перемещение.

Пошаговое использование

1. Инициализация Isotope

Перед использованием remove необходимо создать экземпляр Isotope:

var $grid = $('.grid').isotope({
  itemSelector: '.grid-item',
  layoutMode: 'masonry',
  transitionDuration: '0.6s'
});
  • itemSelector определяет элементы сетки, которые будут управляться Isotope.
  • layoutMode отвечает за алгоритм расположения элементов (masonry, fitRows, vertical).
  • transitionDuration задаёт длительность анимации перемещения элементов.

2. Выбор элементов для удаления

Элементы можно выбрать через селекторы, фильтры или по событиям:

var $itemsToRemove = $grid.find('.grid-item.remove-me');

Здесь выбираются все элементы с классом remove-me.

3. Применение метода remove

$grid.isotope('remove', $itemsToRemove);

После вызова все выбранные элементы плавно исчезнут, а оставшиеся элементы займут освободившиеся места с анимацией.

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

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

$grid.on('click', '.grid-item .remove-button', function() {
  var $item = $(this).closest('.grid-item');
  $grid.isotope('remove', $item);
});
  • .closest('.grid-item') гарантирует, что удаляется весь элемент сетки.
  • Любые изменения DOM через remove синхронизируются с Isotope, если использовать именно этот метод.

Комбинирование с методом layout

Метод remove автоматически перестраивает сетку, но можно явно вызвать layout для дополнительного контроля:

$grid.isotope('remove', $itemsToRemove)
     .isotope('layout');

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

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

Можно удалить элементы, соответствующие определённому фильтру:

var $itemsToRemove = $grid.isotope('getItemElements')
                          .filter(function(item) {
                              return $(item).hasClass('sold-out');
                          });

$grid.isotope('remove', $itemsToRemove);
  • getItemElements возвращает массив текущих элементов сетки.
  • Фильтруются только элементы с нужным условием.
  • Затем они передаются в remove для плавного удаления.

Важные моменты

  • Не использовать стандартный remove jQuery для элементов Isotope. Метод Isotope управляет позиционированием и анимацией; обычное удаление DOM нарушит сетку.
  • Перед удалением убедиться, что элементы находятся в контейнере Isotope. Иначе метод не будет работать.
  • Анимация зависит от transitionDuration. Чем меньше значение, тем быстрее исчезновение элементов.
  • Можно удалять сразу несколько элементов. Достаточно передать jQuery-коллекцию или массив DOM-узлов.

Метод remove позволяет управлять динамическим содержимым сетки, обеспечивая плавность и сохранение компоновки, что делает Isotope удобным инструментом для интерактивных веб-интерфейсов.

Оглавление