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

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

Основной метод удаления: remove

Masonry предоставляет встроенный метод remove, который позволяет удалить один или несколько элементов из сетки.

// Получение экземпляра Masonry
var grid = document.querySelector('.grid');
var msnry = new Masonry(grid, {
  itemSelector: '.grid-item',
  columnWidth: 200,
  gutter: 10
});

// Выбор элемента для удаления
var itemToRemove = grid.querySelector('.grid-item:nth-child(2)');

// Удаление элемента из Masonry
msnry.remove(itemToRemove);

// Обновление макета после удаления
msnry.layout();

Пояснения:

  1. remove(element) — метод принимает один DOM-элемент или массив элементов.
  2. После удаления обязательно нужно вызвать layout(), чтобы Masonry перерасчитал позиции оставшихся элементов.
  3. Если элемент удаляется с анимацией, лучше использовать transitionend для синхронизации с layout().

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

Для плавного исчезновения элемента перед его удалением из сетки можно использовать CSS-переходы:

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

.grid-item.removing {
  opacity: 0;
  transform: scale(0.8);
}
var itemToRemove = grid.querySelector('.grid-item:nth-child(2)');
itemToRemove.classList.add('removing');

// Удаление после завершения анимации
itemToRemove.addEventListener('transitionend', function() {
  msnry.remove(itemToRemove);
  msnry.layout();
});

Преимущества такого подхода:

  • Сетка не “дергается” резко.
  • Пользователь видит визуальное удаление элемента.
  • Позволяет комбинировать с динамическим добавлением элементов.

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

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

grid.addEventListener('click', function(event) {
  if(event.target.matches('.remove-btn')) {
    var item = event.target.closest('.grid-item');
    item.classList.add('removing');
    item.addEventListener('transitionend', function() {
      msnry.remove(item);
      msnry.layout();
    });
  }
});

Ключевые моменты:

  • Используется делегирование событий для динамически добавленных элементов.
  • Метод closest позволяет найти родительский элемент .grid-item, даже если клик пришёлся на вложенный элемент.
  • Плавное удаление обеспечивает лучшее визуальное восприятие.

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

Masonry позволяет удалять несколько элементов одним вызовом метода remove:

var itemsToRemove = grid.querySelectorAll('.grid-item.remove-me');
msnry.remove(itemsToRemove);
msnry.layout();

Особенности:

  • querySelectorAll возвращает NodeList, который Masonry автоматически преобразует в массив.
  • Вызывать layout() необходимо один раз после удаления всех элементов, чтобы избежать лишних пересчётов.

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

  1. Не вызван layout() после remove В этом случае сетка не перестроится, и пустое место останется.

  2. Попытка удалить элемент, который не является частью Masonry Masonry будет игнорировать его, и layout() не даст ожидаемого результата.

  3. Удаление элемента без учёта анимации Если элемент исчезает мгновенно с CSS-переходами, возможны визуальные “скачки” других элементов.

Оптимизация при динамическом контенте

При частом удалении элементов полезно использовать метод reloadItems() для обновления внутреннего массива элементов Masonry перед вызовом layout():

msnry.remove(item);
msnry.reloadItems();
msnry.layout();
  • reloadItems() пересчитывает все текущие .grid-item внутри контейнера.
  • Полезно, если элементы добавляются или удаляются динамически, а Masonry может потерять синхронизацию.

Итоговое сочетание методов

Удаление элемента из Masonry оптимально сочетать с плавной анимацией и корректным вызовом layout(). Для динамических интерфейсов рекомендуется:

  1. Добавлять класс анимации при удалении.
  2. Использовать transitionend для точного момента удаления.
  3. После удаления вызывать remove и layout.
  4. При массовых изменениях использовать reloadItems() для синхронизации сетки.

Эти подходы обеспечивают корректное и визуально приятное управление элементами в Masonry-сетке.

Оглавление