Удаление существующих элементов

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

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

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

Синтаксис:

$grid.isotope('remove', $items)
        .isotope('layout');
  • $grid — контейнер Isotope, обычно выбранный через jQuery: $('.grid').
  • $items — jQuery-объект, содержащий элементы, которые необходимо удалить.
  • layout — обязательный вызов после remove, чтобы библиотека пересчитала расположение оставшихся элементов.

Пример:

var $grid = $('.grid').isotope({
  itemSelector: '.grid-item',
  layoutMode: 'masonry'
});

// Удаление всех элементов с классом .remove
var $itemsToRemove = $grid.find('.remove');
$grid.isotope('remove', $itemsToRemove)
     .isotope('layout');

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

Isotope поддерживает плавное удаление элементов с использованием CSS-переходов. Для корректной анимации необходимо настроить свойства transitionDuration при инициализации контейнера:

var $grid = $('.grid').isotope({
  itemSelector: '.grid-item',
  layoutMode: 'masonry',
  transitionDuration: '0.6s'
});

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

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

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

$grid.find('.grid-item').each(function() {
  if ($(this).data('remove') === true) {
    $grid.isotope('remove', $(this));
  }
});
$grid.isotope('layout');

Такой подход позволяет гибко управлять удалением элементов без необходимости заранее добавлять классы для каждого объекта.

Взаимодействие с фильтрацией и сортировкой

Удаление элементов корректно работает вместе с фильтрацией и сортировкой. Например, если контейнер уже отфильтрован, remove удаляет элементы из текущего состояния отображения и автоматически обновляет видимые элементы:

$grid.isotope({ filter: '.active' });
$grid.isotope('remove', $grid.find('.grid-item.to-remove'))
     .isotope('layout');

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

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

Для удаления большого количества элементов рекомендуется формировать jQuery-коллекцию всех элементов, которые подлежат удалению, и вызвать remove один раз. Это более эффективно, чем удаление по одному элементу в цикле:

var $allToRemove = $grid.find('.old-item');
$grid.isotope('remove', $allToRemove)
     .isotope('layout');

Работа с добавлением и последующим удалением

При динамическом добавлении элементов с помощью метода appended их также можно удалять стандартным способом remove. Это позволяет создавать полноценные интерактивные интерфейсы:

var $newItems = $('<div class="grid-item new">Новый элемент</div>');
$grid.append($newItems)
     .isotope('appended', $newItems);

// Позже удалить
$grid.isotope('remove', $newItems)
     .isotope('layout');

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

Особенности и рекомендации

  • Всегда вызывать layout после remove, чтобы избежать некорректного расположения элементов.
  • Для плавной анимации использовать transitionDuration.
  • При работе с динамическим контентом, добавленным через AJAX или другие источники, комбинировать методы appended и remove для управления элементами.
  • Удаление элементов не влияет на фильтры, однако необходимо учитывать, что удалённые элементы исчезают из DOM полностью, что может повлиять на последующую логику фильтрации или подсчёт элементов.
Оглавление