試圖創建與刪除功能的待辦事項列表

即時通訊新的JavaScript和編碼一般來說，我試圖做一個簡單的事情，但不能刪除所有的複選框刪除按鈕，它只會刪除第一個複選框。多謝你們。試圖創建與刪除功能的待辦事項列表

function taskadd() { 
    taskNew = new objectTask(); 
} 

function objectTask() { 
    var task = document.getElementById('textinput').value; 
    var listItem = document.createElement("li"); 
    listItem.id = task; 
    var itemText = document.createTextNode(task); 
    listItem.appendChild(itemText); 
    var checkbox = document.createElement("input") 
    checkbox.type = "checkbox"; 
    checkbox.name = task; 
    checkbox.id = "checkbox"; 
    document.getElementById('place').appendChild(listItem); 
    document.getElementById(task).insertBefore(checkbox, listItem.firstChild); 
} 

function deleteCheckBox() { 
    while (document.getElementById('checkbox').checked === true) { 
     var itemNode = document.getElementById(checkbox.name); 
     itemNode.parentNode.removeChild(itemNode); 
    } 
}

來源

2014-10-05 Shawn Santiago

複選框ID正在重複 – mithunsatheesh 2014-10-05 18:34:26

我修改你的代碼，消除不必要的id和name屬性，並更新了deleteCheckBox功能循環的所有li在ul。

function taskadd() { 
 
    taskNew = new objectTask(); 
 
} 
 

 
function objectTask() { 
 
    var task = document.getElementById('textinput').value; 
 
    var listItem = document.createElement("li"); 
 
    var checkbox = document.createElement("input") 
 
    checkbox.type = "checkbox"; 
 
    listItem.appendChild(checkbox); 
 
    var itemText = document.createTextNode(task); 
 
    listItem.appendChild(itemText); 
 
    document.getElementById('place').appendChild(listItem); 
 
} 
 

 
function deleteCheckBox() { 
 
    var ul = document.getElementById('place'); 
 
    var li = ul.children; 
 
    for (var i=0; i < li.length; i++) { 
 
     while(li[i] && li[i].children[0].checked) { 
 
      ul.removeChild(li[i]); 
 
     } 
 
    } 
 
}

<div id="list"> 
 
    <input type='text' id='textinput' /> 
 
    <input type='button' onclick='taskadd()' value='Add to list' /> 
 
    <input type='button' onclick="deleteCheckBox()" value='Delete' /> 
 
    <ul id="place"></ul> 
 
</div>

我還分叉和更新你的小提琴：http://jsfiddle.net/JohnnyEstilles/gtpdLkLq/。

來源

2014-10-05 19:01:19 JME

真棒男人謝謝。還有一件事我試圖添加一個按鈕來標記某些重要的項目。我嘗試修改的東西，但似乎得到它。這裏是小提琴http://jsfiddle.net/w2q4vkh3/1/ – 2014-10-05 21:03:04

這實際上是一個單獨的問題，但請繼續嘗試這個[http://jsfiddle.net/JohnnyEstilles/pdLvearc/](http://jsfiddle.net/JohnnyEstilles/pdLvearc /）。如果你要做大量的DOM操作，你應該考慮使用諸如jQuery之類的庫，而不是純JS。 – JME 2014-10-06 00:43:08

您爲每個複選框指定了相同的ID，而getElementById方法僅返回第一個匹配元素。

如果你想獲得所有的複選框並刪除選中的選項，你可以從這樣做開始。 （請注意，此代碼編寫寫意未經測試）

var inputs = document.getElementsByTagName("input"); 
for(i=o; i < inputs.length; i++){ 
    if(inputs[i].type == "checkbox" && inputs[i].checked){ 
     inputs[i].parentNode.removeChild(inputs[i]); 
    } 
}

首先獲得與標籤「輸入」的所有元素，然後檢查它們是否複選框類型和檢查。

來源

2014-10-05 19:07:55 LTJD

準備+1你的答案，但你的建議遭受三個問題：（1）孤兒的'li'元素包裝已刪除的'input'元素，（2）它沒有考慮到變化當多個'input'元素被標記爲刪除時，剩餘的'input'元素的位置作爲被檢查的'input'元素被刪除，並且（3）假定在其上沒有其它的'checkbox'類型的'input'元素這一頁。而且......你有一個錯字'i = o'應該是'i = 0'。抱歉。 :-( – JME 2014-10-06 01:34:37

@JohnnyEstilles你對所有這些事情的權利，我專注於「刪除所有已檢查的chekboxes」問題，並忽略了上下文，你的回答是正確的方式。 – LTJD 2014-10-06 06:37:19

這很酷。不錯，我只是想留下一些「建設性的批評」來啓發未來的觀衆。:-) – JME 2014-10-06 07:04:02

試圖創建與刪除功能的待辦事項列表

回答

相關問題