Home >Web Front-end >JS Tutorial >How to delete an added list item using JavaScript?

How to delete an added list item using JavaScript?

王林forward: 2023-09-13 21:25:081213browse

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

In HTML, developers can use the "ul" tag to create a list of items. We can add all related items to a single list. We can also use JavaScript to manage list items.

Sometimes, developers need to add or remove list items using JavaScript. We can access the list items using specific attribute values and remove the list items using the removechild() method.

In this tutorial, we will take input from the user and delete list items based on the value.

grammar

Users can use javaScript to delete added list items according to the following syntax

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

In the above syntax, we use id to access the list item. After that, we remove the selected list item from the list using removechild() method.

Example 1 (Removing dynamic elements from the list)

In the example below, we create a list with id equal to "car". Additionally, we created input boxes to get the list item values from the user. Additionally, we have created add car and remove car buttons which call the addCar() and removeCar() functions when the user clicks the corresponding button.

In JavaScript, we access list and text input values. In the addCar() function, we first create the list item and then set the id of the list item. Next, we create a text node, append it to the list item, and then use the appendchild() method to append the list item to the list.

<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>

Example 2 (Remove the last element from the list)

In the example below, we use JavaScript to remove the last list item from the list. This example is very similar to the first example, but the difference is that we remove the last list item in this example and the dynamic list item in the first example.

In the removeCar() function, we use the ‘lastElementChild’ attribute to get the last child element of the list. After that we remove the last element if it exists.

In the output, the user can add multiple items to the list and then click the delete button to delete the list elements.

<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>

Example 3

In the example below, we use JavaScript to remove all list items. Here we create the project list.

In JavaScript, we define the addItem() function to add items and the clearAll() function to remove all items from the list. In the clearAll() function, we use the "firstchild" attribute to get the first child of the list and use the removechild() method to remove the child. We use a while loop to iterate until all children of the list are removed.

In the output, the user can press the Clear All button to remove all items from the list.

<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>

in conclusion

Users learned to remove dynamic items from lists. The basic approach is that each list item should have a unique identifier to access and delete dynamic list items. Here we use the list item value as the id of the identifier itself.

In the second example, we remove only the last child element from the list; in the third example, we remove all list items together.

The above is the detailed content of How to delete an added list item using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!

JavaScript html while 标识符循环 ul

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：How to replace an HTML element with another element using JavaScript?Next article：How to replace an HTML element with another element using JavaScript?

See more