Question

我正在制作待办事项列表，我希望能够添加新任务，并删除已签出的任务。但是，似乎我的功能只是删除所有任务，而不仅仅是已检查的任务。它似乎也不允许添加新任务。

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/

Answer 1

.remove删除了您调用它的元素，并且不会删除要删除的内容。以下内容：

task_area.remove(tasks.children[i])

应该是

tasks.children[i].remove()

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

Answer 2

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

<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>

如果有任何疑虑，请告诉我。

Answer 3

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

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

删除选中的复选框

3 个答案: