How to remove an added list items using JavaScript ? Last Updated : 06 Jul, 2021 Summarize Comments Improve Suggest changes Share Like Article Like Report 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> Output: Now, click on add item to add any item to the list. Click on remove item to delete any item from the list. Comment More infoAdvertise with us Next Article Remove & Add new HTML Tags using JavaScript V viv_007 Follow Improve Article Tags : Technical Scripter JavaScript Web Technologies Technical Scripter 2020 JavaScript-Questions +1 More Similar Reads How to remove an HTML element using JavaScript ? Removing an HTML element using JavaScript involves deleting it from the DOM, typically using methods like element.remove() or parentNode.removeChild(). This approach updates the webpage dynamically, allowing for responsive interactions by removing unwanted or outdated elements based on user actions 3 min read How to remove an HTML element using JavaScript ? Removing an HTML element using JavaScript involves deleting it from the DOM, typically using methods like element.remove() or parentNode.removeChild(). This approach updates the webpage dynamically, allowing for responsive interactions by removing unwanted or outdated elements based on user actions 3 min read Remove & Add new HTML Tags using JavaScript In web development, dynamically add or remove HTML tags using JavaScript. This can be useful for creating interactive user interfaces and updating content based on user actions. Below are the approaches to remove and add new HTML tags using JavaScript: Table of Content Using createElement and remove 3 min read How to Close List Items with JavaScript? Closing list items dynamically with JavaScript involves creating a user interface where each list item has a button or an icon that allows the user to remove that particular item from the list. Basically this is commonly seen in task in task management applications shopping lists and other similar U 3 min read How to Remove First and Last Element from Array using JavaScript? Removing the first and last elements from an array is a common operation. This can be useful in various scenarios, such as data processing, filtering, or manipulation. Example:Input: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]Output: [ 2, 3, 4, 5, 6, 7, 8, 9 ]Removing first and last element in array can be do 2 min read How to add and remove properties from objects in JavaScript ? We will try to understand how to add properties to an object and how to add or remove properties from an object in JavaScript.Before we go and see the addition and removal of properties from an object let us first understand the basics of an object in JavaScript.Object:An object in JavaScript is a c 6 min read Like