首页　>　文章列表　>　如何使用 JavaScript 删除已添加的列表项？

如何使用 JavaScript 删除已添加的列表项？

406 2023-09-16

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

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

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

语法

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

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

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

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

在下面的示例中，我们创建了 id 等于“汽车”的列表。此外，我们还创建了输入框来从用户那里获取列表项的值。此外，我们还创建了添加汽车和删除汽车按钮，当用户单击相应按钮时，该按钮会调用 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>