Sometimes, we want to remove text without removing inner elements from a parent element using JavaScript.
In this article, we’ll look at how to remove text without removing inner elements from a parent element using JavaScript.
How to remove text without removing inner elements from a parent element using JavaScript?
To remove text without removing inner elements from a parent element using JavaScript, we can loop through all the child nodes in the element and remove the ones with nodeType 3.
For instance, we write:
<div id='foo'>
hello world
</div>
to add a div.
Then we write:
const el = document.getElementById("foo")
let child = el.firstChild
let nextChild;
while (child) {
nextChild = child.nextSibling;
if (child.nodeType === 3) {
el.removeChild(child);
}
child = nextChild;
}
to select it with getElementById.
Then we loop through the child elements by first getting the first child with firstChild.
And then we use a while loop to get the nextSibling node.
If the nodeType is 3, then we call removeChild to remove it.
As a result, we shouldn’t see ‘hello world’ in the div after the loop is run.
Conclusion
To remove text without removing inner elements from a parent element using JavaScript, we can loop through all the child nodes in the element and remove the ones with nodeType 3.
