JavaScript element.remove()
last modified April 2, 2025
In this article, we explore the element.remove() method in
JavaScript. This method is essential for DOM manipulation, allowing developers
to remove elements from the document tree completely.
Basic Definition
The element.remove() method removes the element from the DOM it
belongs to. This is a modern and straightforward way to delete elements
compared to older methods like removeChild().
The method doesn't require any parameters and doesn't return any value. Once called, the element is immediately removed from its parent node in the DOM.
Basic element.remove()
This example demonstrates how to remove a simple div element from the DOM.
<!DOCTYPE html>
<html>
<head>
<title>Basic element.remove()</title>
</head>
<body>
<div id="content">This will be removed</div>
<button onclick="removeElement()">Remove Element</button>
<script>
function removeElement() {
const element = document.getElementById('content');
element.remove();
}
</script>
</body>
</html>
In this basic example, we have a div element with the ID "content" and a button.
When the button is clicked, the removeElement function is called.
The function retrieves the element using getElementById and then
calls remove() on it. The element is immediately removed from the
DOM when this method is called.
Removing Multiple Elements
This example shows how to remove multiple elements with a single function call.
<!DOCTYPE html>
<html>
<head>
<title>Removing Multiple Elements</title>
</head>
<body>
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<button onclick="removeItems()">Remove All Items</button>
<script>
function removeItems() {
const items = document.querySelectorAll('.item');
items.forEach(item => item.remove());
}
</script>
</body>
</html>
Here we have three div elements with the class "item" and a button. When the
button is clicked, the removeItems function is called.
The function uses querySelectorAll to get all elements with the
class "item", then iterates through them with forEach, calling
remove() on each one. This efficiently removes all matching
elements.
Removing with Event Delegation
This example demonstrates removing elements using event delegation.
<!DOCTYPE html>
<html>
<head>
<title>Event Delegation Removal</title>
</head>
<body>
<ul id="list">
<li>Item 1 <button class="remove-btn">X</button></li>
<li>Item 2 <button class="remove-btn">X</button></li>
<li>Item 3 <button class="remove-btn">X</button></li>
</ul>
<script>
document.getElementById('list').addEventListener('click', function(e) {
if (e.target.classList.contains('remove-btn')) {
e.target.parentElement.remove();
}
});
</script>
</body>
</html>
In this example, we have a list with items that each have a remove button. Instead of adding event listeners to each button, we use event delegation.
The event listener on the parent ul element checks if the clicked element has the "remove-btn" class. If so, it removes the parent li element. This is more efficient than adding listeners to each button individually.
Removing with Animation
This example shows how to animate an element before removing it from the DOM.
<!DOCTYPE html>
<html>
<head>
<title>Animated Removal</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
transition: all 0.5s ease;
}
</style>
</head>
<body>
<div id="animatedBox" class="box"></div>
<button onclick="fadeAndRemove()">Fade and Remove</button>
<script>
function fadeAndRemove() {
const box = document.getElementById('animatedBox');
box.style.opacity = '0';
box.style.transform = 'scale(0)';
box.addEventListener('transitionend', () => {
box.remove();
});
}
</script>
</body>
</html>
Here we have a red box and a button. When the button is clicked, the box fades out and shrinks before being removed from the DOM.
The fadeAndRemove function first applies CSS transitions to fade
and shrink the box. It then listens for the transitionend event
before removing the element, creating a smooth visual effect.
Conditional Removal
This example demonstrates removing elements based on a specific condition.
<!DOCTYPE html>
<html>
<head>
<title>Conditional Removal</title>
</head>
<body>
<div class="message" data-priority="high">Important message</div>
<div class="message" data-priority="low">Regular message</div>
<div class="message" data-priority="high">Another important message</div>
<button onclick="removeLowPriority()">Remove Low Priority</button>
<script>
function removeLowPriority() {
const messages = document.querySelectorAll('.message');
messages.forEach(message => {
if (message.dataset.priority === 'low') {
message.remove();
}
});
}
</script>
</body>
</html>
In this example, we have several message divs with different priority levels. The button triggers removal of only the low priority messages.
The function uses querySelectorAll to get all messages, then checks
each one's data-priority attribute. Only elements with "low"
priority are removed, demonstrating conditional element removal.
Source
MDN element.remove() Documentation
In this article, we have shown how to use element.remove() in
JavaScript. This method provides a clean and efficient way to remove elements
from the DOM in modern web development.
Author
List all JS DOM tutorials.