Пытаясь сделать список дел

Question

Я новичок в javascript и кодировании в целом, я пытаюсь сделать простой список, но не могу удалить кнопку удаления, чтобы удалить все флажки, он удалит только последний флажок , Спасибо, ребята

http://jsfiddle.net/2L8y73ac/

var task = document.getElementById('textinput'); 

function ObjectTask() { 
     self = this; 
     self.init = function() { 
      self.itemText=document.createTextNode(task.value); 
      self.checkbox = document.createElement("input"); 
      self.checkbox.type = "checkbox"; 
      self.checkbox.name = task.value; 
      self.checkbox.id = "checkbox"; 
      self.checkbox.value = "0"; 
      self.checkbox.onclick = self.clickMe; 

      self.listItem=document.createElement("li"); 
      self.listItem.id = task.value; 
      self.listItem.appendChild(self.itemText); 
      self.listItem.appendChild(self.checkbox); 

      self.deleteCheckBox = document.getElementById('deleteBtn'); 
      self.deleteCheckBox.onclick = self.deleteMe; 
      document.getElementById('place').appendChild(self.listItem); 
     } 

     self.clickMe = function() { 
      if (self.checkbox.value === "0") { 
       self.checkbox.value = "1"; 
       console.log("1"); 
      }else { 
       self.checkbox.value = "0"; 
       console.log("0"); 
      } 
     } 

     self.deleteMe = function(){ 
      if (self.checkbox.value == "1"){ 
       var parent = self.listItem.parentNode; 
       parent.removeChild(self.listItem); 
      } 
} 

} 

function taskadd() { 
    var taskNew = new ObjectTask(); 
    taskNew.init(); 
} 

Answer 1

Я не могу показаться, чтобы получить добавление работать либо, но это не имеет значения. :)

Проблема заключается в том, что каждый раз, когда вы добавляете элемент, вы назначаете новый обработчик кликов для отдельной кнопки удаления. Когда вы нажимаете кнопку «Удалить», вызывается обработчик события последнего элемента каждый раз (даже если сам элемент уже удален).

Проблема в этом фрагменте кода:

self.deleteCheckBox = document.getElementById('deleteBtn'); 
self.deleteCheckBox.onclick = self.deleteMe; 

deleteCheckBox присваивается (глобальный) кнопку удаления. После этого вы назначаете ему новый обработчик onclick, перезаписывая предыдущий.

Лучшим подходом было бы написать один общий обработчик для кнопки удаления, который отображает все выбранные флажки и находит другие элементы, принадлежащие ему, для их удаления. Так что, как и ваш глобальный taskadd(), вы также должны иметь глобальный taskdelete(), который удаляет все выбранные задачи.