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，这是因为加载页面时没有标识为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 = '';
    });
})

演示：Fiddle

Answer 2

由于您标记了jQuery，因此您可以使用技术调用event delegation：

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

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

顺便说一下，因为id是唯一的，所以你应该使用class而不是id作为你的按钮

<强> Updated Fiddle

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

2 个答案: