JS addEventListener 无法始终如一地工作

Question

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

我的网页

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