Question

我是javascript和编码的新手，我试图制作一个简单的待办事项列表，但是无法通过删除按钮来删除所有复选框，它只会删除最后一个复选框。谢谢你们

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()。

试图做一个待办事项清单

1 个答案: