如何根据订单号通过文本删除特定的 Li 标签？

Question

我一直在尝试找出如何删除特定的“li”标签，方法是根据其在列表中的位置输入其编号（即在文本框中键入 3，然后按按钮删除其中的项目列表的位置 3）。我的代码现在的样子，即使只列出了 4 个项目，输入 5 并按回车键仍然会删除 2 个项目，而不是不删除任何项目。我的代码编写方式与为删除特定“li”标签而键入的数字不一致。

如有任何帮助，我们将不胜感激。

<html>
<head>
<title>Chapter 5 Activity</title>
</head>

<body>
<h1>The Best Fruit in the World</h1>
<ol id="fruit">
  <li>Mangos</li>
  <li>Watermelons</li>
  <li>Kiwis</li>
  <li>Pineapples</li>
</ol>

<form action="">

<input type="text" name="rfruit" id="fruitremove">
  <input type="button" value="Click to Remove" onclick="removefruit()">
  Remove fruit you dislike
</form>


<script type="text/javascript">


function removefruit(){
  var fruitminus = document.getElementById("fruitremove").value;
  var flist = document.getElementById("fruit");


  flist.removeChild(flist.childNodes[fruitminus]);

}

</script>

</body>
</html>

Answer 1

出现问题是因为为您的 flist 创建的 NodeList 在您的情况下长度为 8。这是因为每个列表元素创建了 2 个元素（一个是文本，一个是 li）。因此，只需在删除子节点之前添加一个 if 条件，如下所示：

if(fruitminus < (flist.childNodes.length)/2)
    flist.removeChild(flist.childNodes[2*fruitminus - 1]);

li 的索引出现在 NodeList 中的奇数位置，这就是我们需要删除该位置的 childNode 的原因。

如何根据订单号通过文本删除特定的 Li 标签？

How can I remove a specific Li tag based on its order number via text?

javascript

input

getelementbyid

html-lists

removechild