Справочник JavaScript

closest(): ищем ближайшего предка

closest(selector) проверяет сам элемент, затем его родителей и возвращает первый узел, подходящий CSS-селектору. Если совпадения нет, результат равен null.

Рабочий пример

document.querySelector(".catalog").addEventListener("click", (event) => {
  const button = event.target.closest("[data-action=remove]");
  if (!button) return;
  button.closest(".card")?.remove();
});

Метод особенно полезен, когда пользователь нажимает на иконку внутри кнопки: event.target будет иконкой, а closest найдёт саму кнопку.

Когда применять

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

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

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

• Не проверять null
• Путать closest с querySelector
• Удалять предка без ограничения конкретным классом