正在尝试创建具有删除功能的待办事项列表

Trying to create a todo list with delete function

本文关键字：列表 功能 删除 创建      更新时间：2023-09-26

我是javascript和编码的新手，我正在尝试制作一个简单的待办事项列表，但无法使用删除按钮删除所有复选框，它只会删除第一个复选框。谢谢大家。

http://jsfiddle.net/fbct3oL7/1/

function taskadd() {
    taskNew = new objectTask();
}
function objectTask() {
    var task = document.getElementById('textinput').value;
    var listItem = document.createElement("li");
    listItem.id = task;
    var itemText = document.createTextNode(task);
    listItem.appendChild(itemText);
    var checkbox = document.createElement("input")
    checkbox.type = "checkbox";
    checkbox.name = task;
    checkbox.id = "checkbox";
    document.getElementById('place').appendChild(listItem);
    document.getElementById(task).insertBefore(checkbox, listItem.firstChild);
}
function deleteCheckBox() {
    while (document.getElementById('checkbox').checked === true) {
        var itemNode = document.getElementById(checkbox.name);
        itemNode.parentNode.removeChild(itemNode);
    }
}

我已经修改了您的代码，消除了不必要的id和name属性，并更新了deleteCheckBox函数以循环使用ul中的所有li。

function taskadd() {
    taskNew = new objectTask();
}
function objectTask() {
    var task = document.getElementById('textinput').value;
    var listItem = document.createElement("li");
    var checkbox = document.createElement("input")
    checkbox.type = "checkbox";
    listItem.appendChild(checkbox);
    var itemText = document.createTextNode(task);
    listItem.appendChild(itemText);
    document.getElementById('place').appendChild(listItem);
}
function deleteCheckBox() {
    var ul = document.getElementById('place');
    var li = ul.children;
    for (var i=0; i < li.length; i++) {
        while(li[i] && li[i].children[0].checked) {
            ul.removeChild(li[i]);
        }
    }
}
<div id="list">
    <input type='text' id='textinput' />
    <input type='button' onclick='taskadd()' value='Add to list' />
    <input type='button' onclick="deleteCheckBox()" value='Delete' />
    <ul id="place"></ul>
</div>

我还分叉并更新了你的Fiddle：http://jsfiddle.net/JohnnyEstilles/gtpdLkLq/.

您为每个复选框提供相同的id，而getElementById方法只返回第一个匹配的元素。

如果你想获得所有的复选框并删除选中的复选框，你可以这样做（请注意，此代码是自由编写的，未经测试）

var inputs = document.getElementsByTagName("input");
for(i=o; i < inputs.length; i++){
   if(inputs[i].type == "checkbox" && inputs[i].checked){
       inputs[i].parentNode.removeChild(inputs[i]);
   }
}

首先获取标记为"input"的所有元素，然后检查它们是否为复选框类型并已选中。

相关文章：