How to remove an added list items using JavaScript ?
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.
Last Updated :
06 Jul, 2021
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...