Question

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

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);
    }
}

Answer 1

我修改了您的代码，删除了不必要的id和name属性，并更新了deleteCheckBox函数以循环浏览li中的所有ul }。

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>

我还分叉并更新了你的小提琴：http://jsfiddle.net/JohnnyEstilles/gtpdLkLq/。

Answer 2

您为每个复选框指定相同的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”标签的所有元素，然后检查它们是否为复选框类型并进行检查。

尝试使用删除功能创建待办事项列表

2 个答案: