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

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 = 'селектор потомка';

Если клики по вложенным элементам "потомка" учитывать не надо:

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

Если интересуют все клики внутри "потомка", в том числе и по его потомкам:

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

UPD. Наконец-то дождались:

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

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