javascript - 尝试列一个待办事项 list

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() 来删除所有选定的任务。