Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to remove an added list items using JavaScript?
In HTML, developers can use the ‘ul’ tag to create a list of items. We can add all related items to the single list. We can also manage the list items using JavaScript.
Sometimes, developers require to add or remove list items using JavaScript. We can access the list items using the particular attribute value and use the removechild() method to remove the list item.
In this tutorial, we will take the input from the users, and according to the value, we will remove the list item.
Syntax
Users can follow the syntax below to remove an added list items using javaScript
var item = document.getElementById(ID); list.removeChild(item);
In the above syntax, we accessed the list item using the id. After that, we used the removechild() method to remove the selected list item from the list.
Example 1 (Removing the dynamic element from the list)
In the example below, we created the list with an id equal to the ‘cars’. Also, we created the input box to take the value of list items from users. Also, we created the add car and remove car button, which invokes the addCar() and removeCar() function when users click on the respective button.
In JavaScript, we access the list and text input values. In the addCar() function, we first create list items and then set the id for the list item. Next, we create a text node, append it to the list item, and then append the list item to the list using the appendchild() method.
<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 (Removing the last element from the list)
In the example below, we remove the last list items from the list using JavaScript. This example is very similar to the first example, but the difference is that we remove the last list items in this one and the dynamic list item in the first example.
In the removeCar() function, we used the ‘lastElementChild’ property to get the last child element of the list. After that, we remove the last element if it exists.
In the output, users can add multiple items to the list and click the remove button to remove the list element.
<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 remove all list items using JavaScript. Here, we have created the list of items.
In JavaScript, we defined 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’ property to get the first child of the list and the removechild() method to remove the child. We use the while loop and make iterations until it removes all children of the list.
In the output, users 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>
Conclusion
Users learned to remove the dynamic items from the list. The basic approach is that every list item should have a unique identifier to access and remove the dynamic list item and remove it. Here, we used the list item value as an id itself for an identifier.
In the second example, we remove only the last child element from the list; in the third example, we remove all list items together.
4K+ Views
