javascript - 如何制作删除按钮以删除下面代码中的 LI 元素？

Question

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

在我看来，当我执行 deleteButton.parentNode.parentNode.removeChild() 时，它应该删除 li 元素，但不确定为什么这不起作用。

JSFiddle 在这里:http://jsfiddle.net/kboucheron/XVq3n/18/

addButton = document.getElementById('addButton');
clearButton = document.getElementById('clearButton');
deleteButton = document.getElementById('deleteButton');

addButton.addEventListener("click", function(e) {
    var text = document.getElementById('listItem').value;
    var addItem = document.getElementById('output');
    var entry = document.createElement("li");
    text += ' <button id="deleteButton">Delete</button>';
    entry.innerHTML = text;    
    addItem.appendChild(entry);
});

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

deleteButton.addEventListener("click", function(e) {
    deleteButton.parentNode.parentNode.removeChild();
});

Answer 1

如果你看到你的浏览器控制台有一个错误说 Uncaught TypeError: Cannot call method 'addEventListener' of null 这是因为没有元素与 id deleteButton 当页面已加载。

另请注意，元素的 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 = '';
    });
})

演示:Fiddle