We can remove the children of the DOM element in 4 ways:
- Removing all children
- Setting
innerHTML
to empty string - Setting
textContent
to empty string - Using
replaceChildren
method
1. Removing all children
The remove
method of the Element
can be used to remove an element from the DOM. Using this, we can loop through all the child elements of the parent.
Consider we have a ul with 4 li child
// HTML
<ul id="parent">
<li> list 1 </li>
<li> list 2 </li>
<li> list 3 </li>
<li> list 4 </li>
</ul>
In JavaScript, remove all the child until parent have no child
// js
function empty(element) {
while(element.firstElementChild) {
element.firstElementChild.remove();
}
}
let parent = document.getElementById("parent");
empty(parent);
The element.firstElementChild
will return the first child of the parent
. We will remove the firstElementChild
of the parent
as long as the parent has a child.
2. Setting innerHTML
to empty String
By setting an empty string as innerHTML
, we can remove all the children of an Element. When we set a value to innerHTML
, JavaScript will parse the value using HTMLParser
and replace the HTML content as parsed values -- this may cause performance issues.
function empty(element) {
element.innerHTML = "";
}
let parent = document.getElementById("parent");
empty(parent);
3. Setting textContent
to empty String
By setting an empty string as textContent
, we can remove all the children of an Element. When we set a value to textContent
, JavaScript will replace all children of the element with a #text
node. This method is considered faster than innerHTML
.
function empty(element) {
element.textContent = "";
}
let parent = document.getElementById("parent");
empty(parent);
4. Using replaceChildren
method
The replaceChildren
method replaces the children of a node with a specified new set of children. If we don't send an argument, this method will remove all the children of the node in which it was called.
function empty(element) {
element.replaceChildren();
}
let parent = document.getElementById("parent");
empty(parent);
Consider Supporting me here
Top comments (0)