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

Question

我最近在这里得到了一些帮助，可以根据它在此列表中的位置通过文本删除 li 标签。现在，当将该脚本与我的整个代码放在一起时，它不再按预期工作。目标是能够将新的 li 条目添加到我的列表中（添加到已经存在的 4 个条目中），然后能够通过文本框中的用户输入删除新条目。问题是，假设我添加了 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>

Answer 1

主要问题是您需要使用 .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/

Answer 2

flist.childNodes 按顺序包含 [text, li, text, li, text, li, text, li, text]

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

这是一个根据索引号删除项目的工作函数。

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

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

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

How can I select to remove a specific Li tag from a dynamic list?

javascript

getelementbyid

html-lists

removechild

createelement