Удаление элемента работает только иногда

#javascript

Вопрос:

Мое событие щелчка работает с jQuery, но не с ванильным JS.

Вот как это работает с jQuery:

 $(document).on('click', '.mt-remove-keyword', function() {
  alert('jQuery');
});

Вот как я думал, что это должно работать, но этого не произошло (возможно, потому, что мой элемент динамический):

 const mtRemoveKeywords = document.querySelectorAll('.mt-remove-keyword');
for (let mtRemoveKeyword of mtRemoveKeywords) {
  mtRemoveKeyword.addEventListener('click', (e) => {
        alert('JS');
  });
}

Поэтому я использовал document в качестве селектора, чтобы перенести его в основной селектор:

 document.addEventListener('click', (e) => {
  if (e.target.classList.contains('mt-remove-keyword')) {
    console.log(e.target.classList);
    e.target.parentElement.parentElement.remove();    
  }
});

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

Ответ №1:

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

 document.addEventListener('click', e => {
  var mtKeyword = e.target.closest('.mt-keyword');
  mtKeyword amp;amp; mtKeyword.remove();
});

Было бы лучше привязать прослушиватель событий к родительскому элементу, чтобы не отслеживался каждый щелчок по документу.

1. К сожалению, ваше решение работает только иногда. Поскольку я только иногда обращаюсь к этому оператору if. console.log(e.target.classList); иногда возвращает [«svg-inline—fa», «fa-times-circle», «fa-w-16», «mt-remove-keyword», значение: «svg-inline—fa fa-times-circle fa-w-16 mt-remove-keyword»] и иногда [«»] . Я думаю, это должно быть из-за значка font awesome, который я использую.

2. Неясно, как это не сработает. Если элемент нажат, он будет обнаружен родительским элементом, и ближайший к нему поднимется по дереву и найдет элемент с классом mt-keyword. Событием будет тот элемент, на который был точно нажат. Вы можете использовать event.currentTarget вместо этого, который будет элементом, к которому привязано событие.

Ответ №2:

Вот как я мог бы решить эту проблему (с помощью epascarello):

 document.addEventListener('click', (e) => {
  if (e.target.classList.contains('mt-remove-keyword') || e.target.parentElement.classList.contains('mt-remove-keyword')) {
    e.target.closest('.mt-keyword').remove();
  }
});