title: Remove checked checkboxes
body: <p>I am making a To-do list, where I want to be able to add new tasks, and delete tasks that are checked off. However, it seems my function just deletes <strong>all</strong> tasks, not just the ones that are checked off. Neither does it seem to allow new tasks to be added. </p>
  
  <p>html:</p>
  
  <pre><code>&lt;h1 id="title"&gt; To-do list&lt;/h1&gt;
  &lt;div id="task_area"&gt;
  &lt;/div&gt;
  &lt;input type="text" id="putin"&gt;&lt;/input&gt;
  &lt;button id="add"&gt;add&lt;/button&gt;
  </code></pre>
  
  <p>javascript:</p>
  
  <pre><code>&lt;button id="clear"&gt;Clear completed tasks&lt;/button&gt;
  
  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 &lt; task_area.children.length; i++) {
          if (task_area.children[i].checked === true) {
  
              task_area.remove(tasks.children[i])
          }
  
      }
  
  
  })
  </code></pre>
  
  <p>jsfiddle: <a href="https://jsfiddle.net/4coxL3um/" rel="nofollow">https://jsfiddle.net/4coxL3um/</a></p>