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
Selected Reading
How to close list items with JavaScript?
Closing list items with JavaScript involves adding click event listeners to close buttons that hide or remove list items from the DOM. This creates an interactive list where users can dismiss items they no longer need.
Complete Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
* {
box-sizing: border-box;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
ul li {
border: 1px solid rgb(221, 221, 221);
background-color: #5a5cec;
color: white;
padding: 12px;
text-decoration: none;
font-size: 18px;
display: block;
position: relative;
font-weight: 500;
}
ul li:hover {
background-color: rgb(43, 0, 145);
}
.close {
cursor: pointer;
position: absolute;
top: 50%;
right: 0%;
padding: 12px 16px;
transform: translate(0%, -50%);
}
.close:hover {
background: red;
}
</style>
</head>
<body>
<h1>Closable List Items Example</h1>
<h2>Click 'x' on the list items to close them</h2>
<ul>
<li>Cat<span class="close">×</span></li>
<li>Lion<span class="close">×</span></li>
<li>Tiger<span class="close">×</span></li>
<li>Leopard<span class="close">×</span></li>
<li>Cheetah<span class="close">×</span></li>
</ul>
<script>
var closebtns = document.querySelectorAll(".close");
Array.from(closebtns).forEach(item => {
item.addEventListener("click", () => {
item.parentElement.style.display = "none";
});
});
</script>
</body>
</html>
How It Works
The JavaScript uses querySelectorAll() to find all elements with the "close" class, then adds a click event listener to each one. When clicked, it hides the parent list item by setting its display property to "none".
Method 1: Hiding with display: none
<script>
var closebtns = document.querySelectorAll(".close");
Array.from(closebtns).forEach(item => {
item.addEventListener("click", () => {
item.parentElement.style.display = "none";
});
});
</script>
Method 2: Removing from DOM
<script>
var closebtns = document.querySelectorAll(".close");
Array.from(closebtns).forEach(item => {
item.addEventListener("click", () => {
item.parentElement.remove();
});
});
</script>
Method 3: With Animation
<script>
var closebtns = document.querySelectorAll(".close");
Array.from(closebtns).forEach(item => {
item.addEventListener("click", () => {
var listItem = item.parentElement;
listItem.style.opacity = "0";
listItem.style.transition = "opacity 0.3s";
setTimeout(() => {
listItem.remove();
}, 300);
});
});
</script>
Comparison of Methods
| Method | Element in DOM? | Performance | Use Case |
|---|---|---|---|
| display: none | Yes | Fast | When you might need to show items again |
| remove() | No | Best | Permanent removal |
| With Animation | No (after delay) | Good | Better user experience |
Key Points
- Use
querySelectorAll()to select all close buttons at once -
parentElementtargets the list item containing the close button -
display: "none"hides elements but keeps them in the DOM -
remove()completely removes elements from the DOM
Conclusion
Closing list items requires adding event listeners to close buttons that either hide or remove the parent list item. Choose between hiding with CSS or removing from DOM based on whether you need the items to be recoverable.
Updated on: 2026-03-15T23:18:59+05:30
644 Views
Advertisements