2014-10-04 24 views
1

即時通訊新的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(); 
} 

回答

0

我似乎無法得到要麼工作增加,但這並不重要。 :)

問題是,當您添加一個項目時,您每次分配一個新的點擊處理程序到單個刪除按鈕。當你點擊刪除按鈕時,每次調用最後一個項目的事件處理程序(即使項目本身已被刪除)。

的問題是在這段代碼:

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

deleteCheckBox被分配了(全局)刪除按鈕。之後,你爲它分配一個新的onclick處理程序,覆蓋前一個。

更好的方法是爲刪除按鈕編寫一個通用處理程序,該處理程序查找所有選中的複選框並查找屬於它的其他元素以刪除它們。因此,就像您的全球taskadd()一樣,還應該有一個全局的taskdelete(),它會刪除所有選定的任務。

+0

真棒男人謝謝。我之前嘗試過,但我一直在爲gettting錯誤。這裏的js到我以前的版本。 http://jsfiddle.net/fbct3oL7/1/ – 2014-10-05 17:55:40