如何从两个列表中删除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>

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

我有第一部分以我想要的方式工作，这样当有东西放入文本区域并且单击优先级单选按钮时，它将添加到待办事项列表和删除中的生成列表列表，并且删除列表在该项目旁边创建一个单选按钮。

现在，我一直在努力完成的是，在章节05_del（）函数中，如果chapter05（）函数的删除列表中的单选按钮被单击，它会从相应的项目中删除相应的项目，做清单和删除清单。

TL; DR一旦用户选择要删除的元素，将它们从两个列表中删除。

Answer 1

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

在chapter05，我已经修改了下面两行来创建一个名称和值的无线电元素：

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

function chapter05() { 
 
\t var uplist = document.getElementsByClassName('ch5')[0]; 
 

 
\t btn_colors = { 
 
\t \t 'hi': 'hiP', 
 
\t \t 'med': 'medP', 
 
\t \t 'low': 'lowP' 
 
\t } 
 
\t radios = document.getElementsByName('rgPrior'); 
 

 
\t for (var i = 0, length = radios.length; i < length; i++) { 
 
\t \t if (radios[i].checked) { 
 
\t \t \t btn_selected_color = (btn_colors[radios[i].value]); 
 
\t \t \t break; 
 
\t \t } 
 
\t } 
 

 
\t var todo = document.getElementById('txtAdd').value; 
 
\t var entry = document.createElement('li'); 
 
\t entry.className = btn_selected_color; 
 
\t entry.appendChild(document.createTextNode(todo)); 
 
\t uplist.appendChild(entry); 
 

 
\t var botlist = document.getElementsByClassName('ch5')[1]; 
 

 
\t var todo = document.getElementById('txtAdd').value; 
 
\t var entry = document.createElement('li'); 
 
\t var radio = document.createElement("input"); 
 
\t radio.type = "radio"; 
 
\t radio.name = "delete"; 
 
\t radio.value = todo; 
 

 
\t entry.appendChild(document.createTextNode("Delete this item: " + todo + " ")); 
 
\t entry.appendChild(radio); 
 
\t botlist.appendChild(entry); 
 

 
\t document.getElementById('txtAdd').value = " "; 
 
} 
 

 
function chapter05_del() { 
 
\t var botlist = document.querySelectorAll('.ch5')[1]; 
 
\t var li = botlist.querySelectorAll("li input[type='radio']:checked"); 
 
\t 
 
\t if (li.length > 0) { //If user selected a radio button 
 
\t \t var valToDelete = li[0].value; //Get radion button value 
 
\t \t li[0].parentNode.parentNode.removeChild(li[0].parentNode); //Remove the todo item from delete list 
 

 
\t \t var toplist = document.querySelectorAll('.ch5')[0]; //Get handle to top to-do 
 
\t \t //Get handle to all li and loop 
 
\t \t [].slice.call(toplist.querySelectorAll("li")).map(function (el){ 
 
\t \t if (el.innerText.trim() === valToDelete.trim()) el.parentNode.removeChild(el); 
 
\t \t }) 
 
\t } 
 
}

.hiP { 
 
\t color: red; 
 
} 
 

 
.medP { 
 
\t color: blue; 
 
} 
 

 
.lowP { 
 
\t color: green; 
 
} 
 

 
.ch5 { 
 
\t padding-left: 30px; 
 
}

<p style="">A to-do list</p> 
 

 
<ol class="ch5"></ol> 
 

 
<p>&nbsp;</p> 
 
<p> 
 
\t <label for="txtAdd">New thing to do:</label> 
 
\t <input name="txtAdd" type="text" id="txtAdd" size="50" maxlength="50" /> 
 
</p> 
 
<p>Set Priority</p> 
 
<p> 
 
\t <label> 
 
<input type="radio" name="rgPrior" value="hi" id="rgPrior_0"/>High 
 
</label> 
 
\t <br/> 
 
\t <label> 
 
<input type="radio" name="rgPrior" value="med" id="rgPrior_1"/>Meduim 
 
</label> 
 
\t <br/> 
 
\t <label> 
 
<input type="radio" name="rgPrior" value="low" id="rgPrior_2"/>Low 
 
</label> 
 
\t <br/> 
 
</p> 
 
<p>&nbsp;</p> 
 

 
<p> 
 
\t <input type="button" name="btnAdd" id="btnAdd" value="Add a value" onClick="chapter05()" /> 
 
</p> 
 
<br /> 
 

 
<p>Delete Items</p> 
 
<ol class="ch5"></ol> 
 
<p> 
 
\t <input type="button" name="btnDel" id="btnDel" value="Delete an item" onClick="chapter05_del()" /> 
 
</p>