This content originally appeared on DEV Community and was authored by Undefined
We can remove the children of the DOM element in 4 ways:
- Removing all children
- Setting
innerHTMLto empty string - Setting
textContentto empty string - Using
replaceChildrenmethod
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
This content originally appeared on DEV Community and was authored by Undefined
Undefined | Sciencx (2021-07-13T17:26:39+00:00) How to empty the DOM element in JavaScript?. Retrieved from https://www.scien.cx/2021/07/13/how-to-empty-the-dom-element-in-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.