如何选择从动态列表中删除特定的Li标签？

编程问答 2022-06-02

问题描述

最近，我在这里根据其在列表中的位置通过文本删除了li标签方面有所帮助。现在，当将该脚本与我的整个代码放在一起时，它将不再按预期工作。目标是能够将新的li条目添加到我的列表中（添加到已经存在的4个中），然后能够通过用户输入从文本框中删除新的li条目。问题是，说我添加了3个新的li标签，此后，我无法删除正确的li标签（即，如果有5个元素，我键入5以删除li标签5，但什么也没有发生）。我在想添加新的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="afruit" id="fruitadd">
      <input type="button" value="Click to Add" onclick="addfruit()">
      Add your favorite fruit to the list<br>
    
    
    
      <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 addfruit() {
    var fruit1 = document.getElementById("fruitadd").value;
    var newfruit = document.createElement("li");
    newfruit.innerHTML = fruit1;
    
    var flist = document.getElementById("fruit");
    flist.insertBefore(newfruit,flist.childNodes [0]);
    
    }
    
    
    
    
    function removefruit(){
    var fruitminus = document.getElementById("fruitremove").value;
    var flist = document.getElementById("fruit");
    
    if(fruitminus < (flist.childNodes.length)/2)
      flist.removeChild(flist.childNodes[2*fruitminus-1]);
    
    }
    
    
    </script>
    </body>
    </html>

解决方法

主要问题是您需要使用.children（仅列出<li>）而不是.childNodes（同时列出<li>和文本节点）。第二个问题是，您需要将提供的文本与<li>内的文本进行比较，以正确找到要删除的节点。

如果执行此操作，则会得到：

function addfruit() {
  var fruit1 = document.getElementById("fruitadd").value;
  var newfruit = document.createElement("li");
  newfruit.innerHTML = fruit1;
  var flist = document.getElementById("fruit");
  flist.insertBefore(newfruit,flist.childNodes[0]);
}

function removefruit(){
  var fruitminus = document.getElementById("fruitremove").value;
  var flist = document.getElementById("fruit");
  var flist_items = flist.children;
  for (var i = 0; i < flist_items.length; i++) {
    var fruit_item = flist_items[i];
    if (fruit_item.innerText === fruitminus) {
      flist.removeChild(fruit_item);
    }
  }
}

这是一个有效的示例：https://jsfiddle.net/ts1bf2om/

,

flist.childNodes按顺序包含[文本，li，文本，li，文本，li，文本，li，文本]

所以索引5实际上是一个文本节点。

这是一个用于根据索引号删除项目的工作功能。

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

  flist.children[fruitminus - 1].remove();
}
createelementhtml-listsjavascriptremovechildremovechild