JS addEventListener无法持续工作

Question

我正在尝试构建一个简单的待办应用。我已经创建了带有删除图标的列表，并且想要在单击相应的删除图标时删除该项目。

我的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>

我的js

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

当我添加几个待办事项，然后按删除图标时，它并没有删除列表项。有时它可以在2.单击上工作，有时什么也没有发生，并且很少按预期工作。每次刷新页面时，行为都会发生变化。

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();
      }
   });

})