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
Is there a DOM function which deletes all elements between two elements in JavaScript?
In JavaScript, there's no single DOM function that directly deletes all elements between two elements. However, you can achieve this using a combination of DOM methods like nextElementSibling and remove().
Problem Setup
Consider the following HTML structure where we want to remove all <p> elements between a starting point and an ending point:
<nav>START</nav> <p>My Name is John</p> <p>My Name is David</p> <p>My Name is Bob</p> <p>My Name is Mike</p> <p>My Name is Carol</p> <footer>END</footer>
We need to remove all <p> elements between the <nav> (START) and <footer> (END) elements.
Solution Using nextElementSibling and remove()
The approach involves iterating through sibling elements and removing them one by one:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Remove Elements Between Two Points</title>
</head>
<body>
<nav>START</nav>
<p>My Name is John</p>
<p>My Name is David</p>
<p>My Name is Bob</p>
<p>My Name is Mike</p>
<p>My Name is Carol</p>
<footer>END</footer>
<script>
// Get references to start and end elements
const startingPoint = document.querySelector("nav");
const endingPoint = document.querySelector("footer");
// Remove all elements between start and end
while (startingPoint.nextElementSibling &&
startingPoint.nextElementSibling !== endingPoint) {
startingPoint.nextElementSibling.remove();
}
console.log("Elements between START and END have been removed");
</script>
</body>
</html>
How It Works
The solution uses a while loop that:
- Checks if the starting element has a next sibling
- Verifies that the next sibling is not the ending element
- Removes the next sibling element using
remove() - Continues until reaching the ending element
Alternative Method Using Array and Filter
For more complex scenarios, you can collect elements first, then remove them:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alternative Method</title>
</head>
<body>
<nav>START</nav>
<p>Element 1</p>
<div>Element 2</div>
<span>Element 3</span>
<footer>END</footer>
<script>
function removeElementsBetween(startElement, endElement) {
const elementsToRemove = [];
let currentElement = startElement.nextElementSibling;
// Collect elements to remove
while (currentElement && currentElement !== endElement) {
elementsToRemove.push(currentElement);
currentElement = currentElement.nextElementSibling;
}
// Remove collected elements
elementsToRemove.forEach(element => element.remove());
}
const start = document.querySelector("nav");
const end = document.querySelector("footer");
removeElementsBetween(start, end);
console.log("Elements removed using alternative method");
</script>
</body>
</html>
Key Points
-
nextElementSiblinggets the next element node (skips text nodes) -
remove()method removes the element from the DOM - Always check for element existence before calling
remove() - The loop continues until it reaches the ending element or runs out of siblings
Conclusion
While there's no single DOM function to delete elements between two points, combining nextElementSibling with remove() provides an effective solution. This approach gives you precise control over which elements to remove in your DOM structure.
360 Views
