Как удалить дальнего родителя при клике на потомке?

Question

[Roman Chasovitin]

Всем доброго дня. Существует список элементов, состоящий из n-кол-ва элементов. У каждого элемента внутри есть кнопка закрыть, при клике на которую должен удаляться элемент. Кнопка является непрямым потомком этого элемента. У меня примерно это выглядит вот так:

trashButtons.forEach((el) => {
  el.addEventListener('click', deleteElem.bind(null));
}

function deleteElem(e) {
  e.target.parentNode.parentNode.parentNode.parentNode.parentNode.removeChild(e.target);
}

Но такой подход, как я понимаю, неправильный. Встал вопрос, как сделать это более правильно? В гугле ответа не нашел. Спасибо!

Answer 1

[0xD34F]

const ancestorSelector = 'селектор_предка';
const descendantSelector = `${ancestorSelector} селектор_потомка`;

Если цеплять обработчик клика непосредственно на потомков - от элемента, на котором висит обработчик, поднимаемся к предку и удаляем его:

document.querySelectorAll(descendantSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, e => {
  let el = e.currentTarget;
  while (!(el = el.parentNode).matches(ancestorSelector)) ;
  el.replaceWith();
});

Если применять делегирование - пробуем подняться от целевого элемента к потомку, если таковой нашёлся, поднимаемся к предку и удаляем его:

document.addEventListener('click', ({ target: t }) =>
  (t = t.closest(descendantSelector)) && t.closest(ancestorSelector).remove()
);