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

编程问答 2022-06-03

问题描述

我一直在尝试找出如何通过根据列表中的位置键入其编号来删除特定“ li”标签的方法（即在文本框中键入3，然后按一个按钮以删除位置3中的项目列表中的）。我的代码现在的方式是，即使只列出了4个项目，键入5并按Enter键仍会删除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>

解决方法

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

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

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

html-listsinputinputjavascriptremovechildremovechild