How can I remove html elements that are nested into each other?

Question

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.

Answer 1

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(); }; };

Answer 2

Here you go. Firstly you getElementsByTagName that returns an HTMLCollection which you convert into an array using Array.prototype.slice . Then forEach child ie 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>