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

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 => e.currentTarget.closest(ancestorSelector).replaceWith());

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

document.addEventListener('click', e => {
  const descendant = e.target.closest(descendantSelector);
  if (descendant) {
    descendant.closest(ancestorSelector).outerHTML = '';
  }
});

// или

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

UPD. Наконец-то дождались, теперь сокращённой версии делегированного обработчика можно придать более пристойный вид:

document.addEventListener('click', e => {
  e.target.closest(descendantSelector)?.closest(ancestorSelector).remove();
});