javascript - 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.

标签： javascripthtmlvue.jsecmascript-6

Answer 1

我自己解决了它，这很容易令人尴尬。

我不得不做一个递归函数。

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