删除选中的复选框

我正在做一个待办事项列表，我希望能够添加新任务，并删除已关闭的任务。但是，似乎我的功能只是删除全部任务，而不仅仅是那些被检查的任务。它似乎也没有允许添加新的任务。删除选中的复选框

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/

来源

2015-11-03 sauebonden

阅读文档：https：//developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove享受你会给自己的脸掌。 – epascarello

.remove删除您是从调用它的元素，并没有考虑什么，除去参数。以下：

task_area.remove(tasks.children[i])

应该

tasks.children[i].remove()

编辑：作为Mononess下面评论，这只会删除复选框，而不是标签。尽管您可以使用Jayesh Goyani的答案删除这两者，但为了更易于管理，可能最好将每个输入/标签对封装在单个div或跨度中。

来源

2015-11-03 15:20:31

不要忘记删除标签。 – Mononess

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

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

请让我知道是否有任何问题。

来源

2015-11-03 15:30:25

试过了，它似乎没有删除任何东西。它使用jQuery吗？ – sauebonden

我的道歉是我用过jquery。我更新了我的上面的代码片段。（这是使用纯JavaScript）。 –

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

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

来源

2015-11-03 15:51:43

我应该使用什么事件作为触发器？代码中的哪些地方可以实现？ – sauebonden

for（i = 0; i

删除选中的复选框

回答

相关问题