JS addEventListener не работает постоянно

Question

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

my html

<ul class="list-group todos mx-auto text-light">
    <li class="list-group-item d-flex justify-content-between align-items-center">
        <span>Study test</span>
        <i class="far fa-trash-alt delete"></i>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
        <span>Do the hw</span>
        <i class="far fa-trash-alt delete"></i>
    </li>
</ul>

my js

const list= document.querySelector('.todos');
list.addEventListener('click', e => {
   if(e.target.classList.contains('delete')){
       e.target.parentElement.remove();
   }
});

когда я добавляю пару элементов списка задач, а затем нажимаю значок удаления, элемент списка не удаляется. Иногда работает на 2. щелчок, иногда ничего не происходит и редко работает как задумано. Его поведение меняется при каждом обновлении страницы sh.

Answer 1

Попробуйте это в своем JS:

const list = document.querySelectorAll('.todos');

const listArray =  Array.from(list)

listArray.forEach(item => {
   item.addEventListener('click', e => {
      if(e.target.classList.contains('delete')){
          e.target.parentElement.remove();
      }
   });

})