JavaScript 如何删除添加的列表项

在HTML中，开发人员可以使用‘ul’标签创建一个项目列表。我们可以将所有相关项目添加到单个列表中。我们还可以使用JavaScript来管理列表项。

有时，开发人员需要使用JavaScript添加或删除列表项。我们可以使用特定属性值访问列表项，并使用removechild()方法删除列表项。

在本教程中，我们将从用户那里获取输入，并根据值删除列表项。

语法

用户可以按照以下语法使用JavaScript来删除添加的列表项

var item = document.getElementById(ID);
list.removeChild(item);

在上面的语法中，我们使用id访问了列表项。之后，我们使用removechild()方法将所选的列表项从列表中移除。

示例1（从列表中移除动态元素）

在以下示例中，我们创建了一个id为“cars”的列表。同时，我们创建了一个输入框来接收用户输入的列表项的值。另外，我们创建了一个“添加汽车”和“移除汽车”的按钮，当用户点击相应的按钮时调用addCar()和removeCar()函数。在JavaScript中，我们访问列表和文本输入值。在addCar()函数中，我们首先创建列表项，然后为列表项设置id。接下来，我们创建文本节点，将其附加到列表项上，然后使用appendchild()方法将列表项附加到列表上。

<html>
<body>
    <h2> Removing the <i> dynamic list items </i> from the list using JavaScript</h2>
    <ul id = "cars">
    </ul>
    <input type = "text" id = "carName" />
    <button onclick = "addCar()"> Add car </button>
    <button onclick = "removeCar()"> Remove car </button>
    <script>
        var carList = document.getElementById("cars");
        var carName = document.getElementById("carName");
        function addCar() {
            var li = document.createElement("li");
            li.setAttribute('id', carName.value);
            let text = document.createTextNode(carName.value);
            li.appendChild(text);
            carList.appendChild(li);
        }
        function removeCar() {
            var item = document.getElementById(carName.value);
            carList.removeChild(item);
        }
    </script>
</html>

示例 2（从列表中删除最后一个元素）

在下面的示例中，我们使用JavaScript从列表中删除最后一个列表项。这个示例与第一个示例非常相似，但不同之处在于这个示例中删除最后一个列表项，而第一个示例中的动态列表项。

在removeCar()函数中，我们使用’lastElementChild’属性来获取列表的最后一个子元素。之后，如果存在，我们将移除最后一个元素。

在输出中，用户可以向列表中添加多个项目，并单击删除按钮来删除列表元素。

<html>
<body>
    <h2> Removing the <i> last list item </i> from the list using JavaScript </h2>
    <ul id = "cars">
    </ul>
    <input type = "text" id = "carName" />
    <button onclick = "addCar()"> Add car </button>
    <button onclick = "removeCar()"> Remove last car </button>
    <script>
        var carList = document.getElementById("cars");
        var carName = document.getElementById("carName");
        function addCar() {
            var li = document.createElement("li");
            li.setAttribute('id', carName.value);
            let text = document.createTextNode(carName.value);
            li.appendChild(text);
            carList.appendChild(li);
        }
        // function to remove the last element from the list
        function removeCar() {
            // select the last element
            var lastElement = carList.lastElementChild;
            // if the last element is present, then remove it
            if (lastElement) {
                carList.removeChild(lastElement);
            }
        }
    </script>
</html>

示例3

在下面的示例中，我们使用JavaScript删除所有列表项。在这里，我们创建了一个项目列表。

在JavaScript中，我们定义了addItem()函数用于添加项目，以及clearAll()函数用于从列表中删除所有项目。在clearAll()函数中，我们使用’firstchild’属性获取列表的第一个子元素，并使用removechild()方法删除该子元素。我们使用while循环并进行迭代，直到删除列表的所有子元素。

在输出中，用户可以点击清除所有按钮来从列表中删除所有项目。

<html>
<body>
   <h2> Removing the <i> all last list items </i> from the list using JavaScript</h2>
   <ul id = "itmes">
   </ul>
   <input type = "text" id = "itemValue" />
   <button onclick = "addItems()"> Add itmes </button>
   <button onclick = "clearAll()"> clear list </button>
   <script>
      var items = document.getElementById("itmes");
      var itemValue = document.getElementById("itemValue");
      function addItems() {
         var li = document.createElement("li");
         li.setAttribute('id', itemValue.value);
         let text = document.createTextNode(itemValue.value);
         li.appendChild(text);
         items.appendChild(li);
        }
        // function to clear all the list items
      function clearAll() {
         while (items.firstChild) {
         items.removeChild(items.firstChild);
         }
      }
   </script>
</html>