closest: поиск родителя

element.closest(selector) поднимается по DOM-дереву вверх от самого элемента и возвращает ближайшего предка (или сам элемент), соответствующего CSS-селектору, либо null если такого нет.

Зачем нужно

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

Где используется

Делегирование событий: нашли кликнутый элемент → поднялись до нужного контейнера
Проверка, находится ли элемент внутри определённого компонента
Закрытие модальных окон и дропдаунов при клике вне них

Синтаксис

const ancestor = element.closest(cssSelector);
// Возвращает Element или null

Примеры

Делегирование событий на список

const list = document.querySelector('.todo-list');

list.addEventListener('click', (event) => {
  // Найти ближайший .todo-item начиная с target
  const item = event.target.closest('.todo-item');
  if (!item) return; // клик был не на элементе списка

  // Определить, по какой кнопке кликнули
  if (event.target.closest('.btn-delete')) {
    item.remove();
  } else if (event.target.closest('.btn-complete')) {
    item.classList.toggle('completed');
  }
});

Закрытие дропдауна при клике вне

document.addEventListener('click', (event) => {
  const dropdown = document.querySelector('.dropdown');
  // Если клик был не внутри дропдауна — закрыть
  if (!event.target.closest('.dropdown')) {
    dropdown.classList.remove('open');
  }
});

Проверка контекста элемента

function handleInput(event) {
  const form = event.target.closest('form');
  if (!form) return;

  const formId = form.id;
  console.log(`Ввод в форме: ${formId}`);
}

document.addEventListener('input', handleInput);

Подъём до нужного уровня

const btn = document.querySelector('.card__btn');

// Найти карточку, содержащую кнопку
const card = btn.closest('.card');
const section = btn.closest('section');

console.log(card);    // .card элемент
console.log(section); // ближайший <section>

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

Не проверять результат на null — если ни один предок не подходит, метод вернёт null; обращение к свойствам null вызовет ошибку.
Путать с querySelector — querySelector ищет вниз по дереву, closest — вверх.
Использовать для поиска дочернего элемента — для этого подойдёт querySelector; closest работает только вверх.