javascript - 使用 Javascript 进行待办事项列表 : can't delete item

Question

我在执行待办事项列表项目时使用js代码制作了删除项目按钮。

删除之前在代码编辑器中创建的项目效果很好。 *因此在浏览器预览中，我输入了“新待办事项”并将其添加到列表中。* 但删除“新待办事项”项目不起作用。即使 chrome Devtool 也没有显示错误。新项目的标签和类名都是正确的。

p.s:无需担心“X”或 X 图标。我跳过了上传。

[HTML]

<ul id="listUl">
    <li>Meet George <span class="remove"></span></li>
    <li>Pay Bills <span class="remove"></span></li>
    <li>new To-do <span class="remove"></span></li>
</ul>

[JS] - 删除部分。

var remove = document.getElementsByClassName('remove');

for (var i = 0; i < remove.length; i++) {
    remove[i].onclick = function() {
        var target = document.getElementById('listUl');
        target.removeChild(this.parentElement);
    }
}

Answer 1

这是因为您添加的每个新项目都没有任何监听器 (remove[i].onclick = function(){...})。因此，当您单击它们时，不会发生任何事情。您需要为每个新项目添加 onClick 监听器，就像您为初始项目所做的那样。