如何选择从动态列表中删除特定的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>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

html-listsjavascriptremovechild