Question

我正在尝试做一个待办事项清单。当我尝试将其删除时，我根本无法做到。我不知道如何运行功能removeBtn（）

var input = document.getElementById("task");
var button = document.getElementById("enter");
var ul = document.querySelector("ul");

function newElement(){
        var node = document.createElement("li");
        node.appendChild(document.createTextNode(input.value));
        var delButton = document.createElement("button");
        delButton.innerHTML = 'Done';
        node.appendChild(delButton);
        delButton.addEventListener('click', removeBtn);
        ul.appendChild(node).classList.add("remList");
        input.value ='';
}

function checkLength(){
    if (input.value.length != 0){
        newElement();   
    }
    else {
        alert('Empty');
        }
}


function removeBtn(){
    var list = document.getElementsByClassName("remList");
    ul.removeChild("remList");
}

button.addEventListener("click", checkLength);

Answer 1

除了选择要删除的单个元素外，您还需要将正确的.remList与要删除的按钮监听器绑定在一起。如果要在单击node时删除创建的delButton，则需要以某种方式将node连接到侦听器。一种选择是：

// ...
node.appendChild(delButton);
delButton.addEventListener('click', () => node.remove());
ul.appendChild(node).classList.add("remList");
// ...

（根本不需要单独的removeBtn函数）

Answer 2

document.getElementsByClassName() 返回元素的 NodeList 集合。如果要删除单个集合，则可以像访问数组一样访问集合：

var list = document.getElementsByClassName("remList");
ul.removeChild(list[0]); // Remove the first `.remList` child

单击按钮后如何删除特定的<li>？

2 个答案: