刪除選中的複選框

我正在做一個待辦事項列表，我希望能夠添加新任務，並刪除已關閉的任務。但是，似乎我的功能只是刪除全部任務，而不僅僅是那些被檢查的任務。它似乎也沒有允許添加新的任務。刪除選中的複選框

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

刪除選中的複選框

回答

相關問題