Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to remove li elements on button click in JavaScript?
In JavaScript, you can remove list items dynamically by attaching event listeners to buttons within each <li> element. This tutorial shows how to remove specific list items when their corresponding "Remove" buttons are clicked.
HTML Structure
First, let's look at the basic HTML structure for our unordered list:
<ul>
<li class="subjectName">JavaScript <button>Remove</button></li>
<li class="subjectName">MySQL <button>Remove</button></li>
<li class="subjectName">MongoDB <button>Remove</button></li>
<li class="subjectName">Java <button>Remove</button></li>
</ul>
Each list item contains a subject name and a "Remove" button. When clicked, the button will remove its parent <li> element.
Complete Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Remove List Items</title>
<style>
ul {
list-style-type: none;
padding: 0;
}
li {
padding: 10px;
margin: 5px 0;
background-color: #f0f0f0;
border-radius: 5px;
}
button {
margin-left: 10px;
padding: 5px 10px;
background-color: #ff4444;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
}
button:hover {
background-color: #cc0000;
}
</style>
</head>
<body>
<h1>Remove the subjects</h1>
<h2>The Subjects are as follows:</h2>
<ul>
<li class="subjectName">JavaScript <button>Remove</button></li>
<li class="subjectName">MySQL <button>Remove</button></li>
<li class="subjectName">MongoDB <button>Remove</button></li>
<li class="subjectName">Java <button>Remove</button></li>
</ul>
<script>
var allSubjectName = document.querySelectorAll(".subjectName");
for (var index = 0; index < allSubjectName.length; index++) {
// Add click event to each button
allSubjectName[index].querySelector("button").addEventListener("click", function() {
// Remove the parent li element
this.closest(".subjectName").remove();
});
}
</script>
</body>
</html>
How It Works
The JavaScript code works in the following steps:
-
Select all list items:
document.querySelectorAll(".subjectName")gets all elements with the class "subjectName" - Loop through each item: A for loop iterates through each list item
-
Find the button:
querySelector("button")finds the button inside each list item - Add event listener: Each button gets a click event listener
-
Remove parent element:
this.closest(".subjectName").remove()removes the entire list item when clicked
Alternative Approach Using Event Delegation
For better performance with many list items, you can use event delegation:
<script>
document.querySelector('ul').addEventListener('click', function(e) {
if (e.target.tagName === 'BUTTON') {
e.target.closest('.subjectName').remove();
}
});
</script>
Key Points
- Use
closest()method to find the parent element to remove - The
remove()method completely removes the element from the DOM - Event delegation is more efficient for large lists
- Always test that your selectors target the correct elements
Conclusion
Removing list items on button click is straightforward with JavaScript. Use closest() to find the parent element and remove() to delete it from the DOM. Event delegation provides better performance for dynamic lists.
4K+ Views
