删除选中的复选框

Remove checked checkboxes

本文关键字：复选框 删除      更新时间：2023-09-26

我正在制作一个待办事项列表，我希望能够在其中添加新任务，并删除已签出的任务。然而，我的函数似乎只是删除所有任务，而不仅仅是已签出任务。它似乎也不允许添加新任务。

html:

<h1 id="title"> To-do list</h1>
<div id="task_area">
</div>
<input type="text" id="putin"></input>
<button id="add">add</button>

javascript:

<button id="clear">Clear completed tasks</button>
var tasks = document.getElementById("task_area")
var new_task = document.getElementById("add")
var clear = document.getElementById("clear")
new_task.addEventListener("click", function() {
    var putin = document.getElementById("putin")
    var input = document.createElement('input')
    input.type = "checkbox"
    var label = document.createElement('label')
    label.appendChild(document.createTextNode(putin.value))
    task_area.appendChild(input)
    task_area.appendChild(label)

})
clear.addEventListener("click", function() {
    for (i = 0; i < task_area.children.length; i++) {
        if (task_area.children[i].checked === true) {
            task_area.remove(tasks.children[i])
        }
    }

})

jsfiddle：https://jsfiddle.net/4coxL3um/

.remove删除要从中调用它的元素，并且不接受要删除内容的参数。以下内容：

task_area.remove(tasks.children[i])

应该是

tasks.children[i].remove()

编辑：正如Mononess在下面评论的那样，这只会删除复选框，而不会删除标签。虽然您可以使用下面Jayesh Goyani的答案删除这两个，但最好将每个输入/标签对封装在一个div或span中，以便于管理。

您可以尝试为调用以下函数的task_area的每个子级添加一个事件侦听器。还没有机会测试它，可能无法满足你的所有要求，但应该完成任务。

function removeClicked() {
    this.parentNode.removeChild(this);
}

请尝试使用以下代码片段。下面的代码将帮助您删除带有标签的选中复选框。

<body>
    <h1 id="title">To-do list</h1>
    <div id="task_area">
    </div>
    <input type="text" id="putin" />
    <button id="add">add</button>
    <button id="clear">Clear completed tasks</button>
    <script>
        var tasks = document.getElementById("task_area")
        var new_task = document.getElementById("add")
        var clear = document.getElementById("clear")
        new_task.addEventListener("click", function () {
            var putin = document.getElementById("putin")
            var input = document.createElement('input')
            input.type = "checkbox"
            var label = document.createElement('label')
            label.appendChild(document.createTextNode(putin.value))
            task_area.appendChild(input)
            task_area.appendChild(label)
            //document.getElementById("task_area").innerHTML = putin.value
        })
        clear.addEventListener("click", function () {
            for (i = 0; i < task_area.children.length; i++) {
                if (task_area.children[i].checked === true) {
                    tasks.children[i].nextSibling.remove();
                    tasks.children[i].remove();
                }
            }
        })
    </script>
</body>

如果有任何问题，请告诉我。

相关文章：