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

＆＃13;

＆＃13;

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);
		}) 
	}
}

＆＃13;

.hiP {
	color: red;
}

.medP {
	color: blue;
}

.lowP {
	color: green;
}

.ch5 {
	padding-left: 30px;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;