How to remove an added list items using JavaScript ?

Last Updated : 06 Jul, 2021

In the following article, we dynamically add and remove list items using JavaScript. We are using JavaScript to add and/or remove list items dynamically which means that if we run our webpage it will show the option of adding and removing items using buttons.

Approach: In the webpage, one input text box is given for the user entry to add a list item. Two buttons are given to add a list item and also remove a list item. The list items are added or removed using JavaScript functions addItem() and removeItem(). The list items are created using document.createElement() method and to create a text node, document.createTextNode() method is used and then this node is appended using appendChild() method. The list item is deleted using the removeChild() method.

The in-built functions used are listed below.

Create new elements: We can create new elements using the document.createElement() function. It will create elements dynamically.
Append element: We can append elements using the function appendchild().
Create text node: We can create a text node using the document.createTextNode() element. HTML consists of both an element node and a text node. So createTextNode() method creates a text node with the specified text.
Remove existing element: We can remove a child from the created list by using removechild() function.

Example: The following code demonstrates the addition and deletion of list items using JavaScript functions.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
 
    <style>
        #candidate {
            border-radius: 20%;
            border-color: aquamarine;
            box-sizing: border-box;
        }
         
        .buttonClass {
            border-radius: 20%;
            border-color: aqua;
            border-style: inherit;
        }
         
        button:hover {
            background-color: green;
        }
    </style>
</head>
 
<body>
    <ul id="list"></ul>
 
    <input type="text" id="candidate" />
    <button onclick="addItem()" class="buttonClass">
    Add item</button>
    <button onclick="removeItem()" class="buttonClass">
    Remove item</button>
 
    <script>
        function addItem() {
            var a = document.getElementById("list");
            var candidate = document.getElementById("candidate");
            var li = document.createElement("li");
            li.setAttribute('id', candidate.value);
            li.appendChild(document.createTextNode(candidate.value));
            a.appendChild(li);
        }
 
        // Creating a function to remove item from list
        function removeItem() {
 
            // Declaring a variable to get select element
            var a = document.getElementById("list");
            var candidate = document.getElementById("candidate");
            var item = document.getElementById(candidate.value);
            a.removeChild(item);
        }
    </script>
</body>
 
</html>