如何从两个列表中删除HTML列表项

Question

我有一个列表设置，将内容放入文本框时会抛出两个列表，一个列表表示优先事项列表，另一个列表删除不需要的内容。

 function chapter05() { var uplist = document.getElementsByClassName('ch5')[0]; btn_colors = { 'hi': 'hiP', 'med': 'medP', 'low': 'lowP' } radios = document.getElementsByName('rgPrior'); for (var i = 0, length = radios.length; i < length; i++) { if (radios[i].checked) { btn_selected_color = (btn_colors[radios[i].value]); break; } } var todo = document.getElementById('txtAdd').value; var entry = document.createElement('li'); entry.className = btn_selected_color; entry.appendChild(document.createTextNode(todo)); uplist.appendChild(entry); var botlist = document.getElementsByClassName('ch5')[1]; var todo = document.getElementById('txtAdd').value; var entry = document.createElement('li'); var radio = document.createElement("input"); radio.type = "radio"; radio.name = radio; radio.value = radio; entry.appendChild(document.createTextNode("Delete this item: " + todo + " ")); entry.appendChild(radio); botlist.appendChild(entry); document.getElementById('txtAdd').value = " "; } function chapter05_del() { } 

 .hiP { color: red; } .medP { color: blue; } .lowP { color: green; } .ch5 { padding-left: 30px; } 

 <p style="">A to-do list</p> <ol class="ch5"></ol> <p>&nbsp;</p> <p> <label for="txtAdd">New thing to do:</label> <input name="txtAdd" type="text" id="txtAdd" size="50" maxlength="50" /> </p> <p>Set Priority</p> <p> <label> <input type="radio" name="rgPrior" value="hi" id="rgPrior_0"/>High </label> <br/> <label> <input type="radio" name="rgPrior" value="med" id="rgPrior_1"/>Meduim </label> <br/> <label> <input type="radio" name="rgPrior" value="low" id="rgPrior_2"/>Low </label> <br/> </p> <p>&nbsp;</p> <p> <input type="button" name="btnAdd" id="btnAdd" value="Add a value" onClick="chapter05()" /> </p> <br /> <p>Delete Items</p> <ol class="ch5"></ol> <p> <input type="button" name="btnDel" id="btnDel" value="Delete an item" onClick="chapter05_del()" /> </p> </article> 

第一个按钮是将数据输入到页面上（将内容添加到列表中），第二个按钮是删除内容。

我的第一部分按需要的方式工作，因此，当在文本区域中放入某些内容并单击优先级单选按钮时，它会在待办事项列表和删除列表中添加到生成的列表中，并且删除列表会在该项目旁边创建一个单选按钮。

现在，我一直试图完成的是，在Chapter05_del（）函数中，如果单击了Chapter05（）函数的删除列表中的单选按钮，则会从待办事项列表和删除列表。

TL; DR用户选择要删除的元素后，将其从两个列表中删除。

Answer 1

您可以在下面找到更新的代码。 代码中的注释。

在chapter05 ，我修改了以下两行，为创建的单选元素赋予名称和值：

radio.name = "delete";
radio.value = todo;

 function chapter05() { var uplist = document.getElementsByClassName('ch5')[0]; btn_colors = { 'hi': 'hiP', 'med': 'medP', 'low': 'lowP' } radios = document.getElementsByName('rgPrior'); for (var i = 0, length = radios.length; i < length; i++) { if (radios[i].checked) { btn_selected_color = (btn_colors[radios[i].value]); break; } } var todo = document.getElementById('txtAdd').value; var entry = document.createElement('li'); entry.className = btn_selected_color; entry.appendChild(document.createTextNode(todo)); uplist.appendChild(entry); var botlist = document.getElementsByClassName('ch5')[1]; var todo = document.getElementById('txtAdd').value; var entry = document.createElement('li'); var radio = document.createElement("input"); radio.type = "radio"; radio.name = "delete"; radio.value = todo; entry.appendChild(document.createTextNode("Delete this item: " + todo + " ")); entry.appendChild(radio); botlist.appendChild(entry); document.getElementById('txtAdd').value = " "; } function chapter05_del() { var botlist = document.querySelectorAll('.ch5')[1]; var li = botlist.querySelectorAll("li input[type='radio']:checked"); if (li.length > 0) { //If user selected a radio button var valToDelete = li[0].value; //Get radion button value li[0].parentNode.parentNode.removeChild(li[0].parentNode); //Remove the todo item from delete list var toplist = document.querySelectorAll('.ch5')[0]; //Get handle to top to-do //Get handle to all li and loop [].slice.call(toplist.querySelectorAll("li")).map(function (el){ if (el.innerText.trim() === valToDelete.trim()) el.parentNode.removeChild(el); }) } } 

 .hiP { color: red; } .medP { color: blue; } .lowP { color: green; } .ch5 { padding-left: 30px; } 

 <p style="">A to-do list</p> <ol class="ch5"></ol> <p>&nbsp;</p> <p> <label for="txtAdd">New thing to do:</label> <input name="txtAdd" type="text" id="txtAdd" size="50" maxlength="50" /> </p> <p>Set Priority</p> <p> <label> <input type="radio" name="rgPrior" value="hi" id="rgPrior_0"/>High </label> <br/> <label> <input type="radio" name="rgPrior" value="med" id="rgPrior_1"/>Meduim </label> <br/> <label> <input type="radio" name="rgPrior" value="low" id="rgPrior_2"/>Low </label> <br/> </p> <p>&nbsp;</p> <p> <input type="button" name="btnAdd" id="btnAdd" value="Add a value" onClick="chapter05()" /> </p> <br /> <p>Delete Items</p> <ol class="ch5"></ol> <p> <input type="button" name="btnDel" id="btnDel" value="Delete an item" onClick="chapter05_del()" /> </p>