27
loading...
How to empty the DOM element in JavaScript?
We can remove the children of the DOM element in 4 ways:
innerHTML to empty string textContent to empty string replaceChildren methodThe
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. 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);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);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
27