I have an html structure like this:
<p>Hello</p>
<h1>ah</h1>
<child>
<p>Haha</p>
<child>
<p>Hihi</P>
</child>
</child>
<child>
<h4>Hello</h4>
</child>
<h3>Hello</h3>
Goal:
My Goal is to remove all child tags from the DOM to receive this:
<p>Hello</p>
<h1>ah</h1>
<h3>Hello</h3>
What I tried:
const html = document.createElement('div');
//This is the HTML I pasted above.
html.innerHTML = this.item.Body;
let childTags = html.getElementsByTagName('child');
for (let i = 0; i < childTags.length; i++) {
let childTag = childTags[i];
childTag.remove();
}
this.item.Body = html.innerHTML;
My Problem:
The problem that I am having is that getElementsByTagName finds the nested tag that is already removed when I remove the parent child tag, this makes it so the for loop doesn't work.
Any help appreciated.
I solved it myself, and it was embarassingly easy.
I had to make a recursive function.
removeChildComponents() {
const html = document.createElement('div');
html.innerHTML = this.item.Body;
let childTag = html.getElementsByTagName('child');
if (childTag.length > 0) {
childTag[0].remove();
}
this.item.Body = html.innerHTML;
const recursionHandler = html.getElementsByTagName('child')
if (recursionHandler.length > 0) {
this.removeChildComponents();
};
};Here you go. Firstly you getElementsByTagName that returns an HTMLCollection which you convert into an array using Array.prototype.slice. Then forEach child i.e item in array, you .remove() it from DOM.
Array.prototype.slice.call(document.getElementsByTagName('child')).forEach(child => child.remove());<p>Hello</p>
<h1>ah</h1>
<child>
<p>Haha</p>
<child>
<p>Hihi</p>
</child>
</child>
<child>
<h4>Hello</h4>
</child>
<h3>Hello</h3>