Javascript 如何使删除按钮删除下面代码中的LI元素？

我目前正在学习Javascript以更好地理解它。当您向列表中添加项目时，我希望有一个删除按钮将其删除

在我看来，当我执行

deleteButton.parentNode.parentNode.removeChild（）

时，它应该删除

li

元素，但不确定为什么这不起作用

请点击此处：

addButton=document.getElementById（'addButton'）；
clearButton=document.getElementById（'clearButton'）；
deleteButton=document.getElementById（'deleteButton'）；
addButton.addEventListener（“单击”，函数（e）{
var text=document.getElementById（'listItem'）。值；
var addItem=document.getElementById（'output'）；
var条目=document.createElement（“li”）；
text+=“删除”；
entry.innerHTML=文本；
附加项追加子项（条目）；
});
clearButton.addEventListener（“单击”，函数（e）{
var text=document.getElementById（'listItem'）；
var addItem=document.getElementById（'output'）；
addItem.innerHTML=''；
text.value=''；
});
deleteButton.addEventListener（“单击”，函数（e）{
deleteButton.parentNode.parentNode.removeChild（）；
});

如果看到浏览器控制台，则会出现一个错误，说明

未捕获类型错误：无法调用null的方法'addEventListener'

，这是因为加载页面时没有id为的元素

deleteButton

还请注意，元素的ID在文档中必须是唯一的，因此，由于要添加多个删除按钮，请使用class属性对它们进行分组

你的代码应该是

//wait for the window onload event
window.onload = function () {
    var addButton = document.getElementById('addButton');
    var clearButton = document.getElementById('clearButton');

    addButton.addEventListener("click", function (e) {
        var text = document.getElementById('listItem').value;
        var addItem = document.getElementById('output');
        var entry = document.createElement("li");
        entry.innerHTML = text;

        //create a button element
        var btn = document.createElement("Button");
        btn.innerHTML = 'Delete';
        //add button to li
        entry.appendChild(btn);
        //add a click handler to the button
        btn.addEventListener("click", function (e) {
            //delete the parent li
            this.parentNode.parentNode.removeChild(this.parentNode);
        });

        addItem.appendChild(entry);
    });

    clearButton.addEventListener("click", function (e) {
        var text = document.getElementById('listItem');
        var addItem = document.getElementById('output');
        addItem.innerHTML = '';
        text.value = '';
    });
})

---

演示：

由于标记了

jQuery

，因此可以使用技术调用：

在这种情况下，它将帮助您将单击事件绑定到动态创建的删除按钮

顺便说一句，因为

id

是唯一的，所以您应该为按钮使用class而不是id

---

您实际上在使用jQuery吗？问号让人觉得你可能会。如果是这样的话，有更简单的方法来做你正在做的事情。如果你正在寻找一个没有jQuery的解决方案（我假设你正在寻找），请删除jQuery标记哦，对不起，我没有。只是尝试熟悉基本原理，而不使用jQuery。我正在练习面试，所以我只是想在被问到的情况下更流利一些。但是选择者使用的是class

delete按钮，而不是id（他错误地复制了id）
//wait for the window onload event
window.onload = function () {
    var addButton = document.getElementById('addButton');
    var clearButton = document.getElementById('clearButton');

    addButton.addEventListener("click", function (e) {
        var text = document.getElementById('listItem').value;
        var addItem = document.getElementById('output');
        var entry = document.createElement("li");
        entry.innerHTML = text;

        //create a button element
        var btn = document.createElement("Button");
        btn.innerHTML = 'Delete';
        //add button to li
        entry.appendChild(btn);
        //add a click handler to the button
        btn.addEventListener("click", function (e) {
            //delete the parent li
            this.parentNode.parentNode.removeChild(this.parentNode);
        });

        addItem.appendChild(entry);
    });

    clearButton.addEventListener("click", function (e) {
        var text = document.getElementById('listItem');
        var addItem = document.getElementById('output');
        addItem.innerHTML = '';
        text.value = '';
    });
})

$(document).on('click','.deleteButton', function() {
    $(this).parent().remove();    
});