Removing all nodes from the DOM except for one subtree-CodePudding

I have a page structured like this:

<body>
  <div >
    <div >
      <p >Some text</p>
    </div>
  </div>
  <div >
    <div >
      <p >Some other text</p>
    </div>
  </div>
</body>

Given a selector, such as .five, I want to remove all elements from the DOM while preserving the hierarchy of .four > .five > .six. In other words, after deleting all the elements, I should be left with:

<body>
  <div >
    <div >
      <p >Some other text</p>
    </div>
  </div>
</body>

I came up with the following solution to this problem:

function removeElementsExcept(selector) {
    let currentElement = document.querySelector(selector)
    while (currentElement !== document.body) {
        const parent = currentElement.parentNode
        for (const element of parent.children) {
            if (currentElement !== element) {
                parent.removeChild(element)
            }
        }
        currentElement = parent
    }
}

This works well enough for the above case, for which I've created a JSfiddle.

However, when I try run it on a more complex web page such as on https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild with a call such as removeElementsExcept('#sect1'), I'd expect only the blue div containing the text "Note: As long as a reference ..." and its inner contents to be kept on the page. However, if you try to run this, lots of other elements are kept on the page along with the blue div as well.

What am I doing incorrectly in my function?

CodePudding user response：

for .. of needs to loop over an array rather than an HTMLCollection. Use [...parent.children] to spread the HTMLCollection into an array.

Another approach is building a set of nodes you want to keep by traversing all child nodes and all parent nodes from the target element. Then remove all other nodes that aren't in the set. I haven't run a benchmark.

const removeElementsExcept = el => {
  const keptEls = new Set();

  for (let currEl = el; currEl; currEl = currEl.parentNode) {
    keptEls.add(currEl);
  }

  for (const childEl of [...el.querySelectorAll("*")]) {
    keptEls.add(childEl);
  }

  for (const el of [...document.querySelectorAll("body *")]) {
    if (!keptEls.has(el)) {
      el.remove();
    }
  }
};

removeElementsExcept(document.querySelector(".five"));

.four {
  background: red;
  height: 100px;
  padding: 1em;
}
.five {
  background: blue;
  height: 100px;
  padding: 1em;
}
.six {
  background: yellow;
  height: 100px;
  padding: 1em;
}

<div >
  <div >
    <p >Some text</p>
  </div>
</div>
<div >
  <div >
    <p >Some other text</p>
  </div>
</div>

CodePudding user response：

This happens because you are modifying the collection which is being iterated. You can work around this by manually adjusting the index being used to look at the children.

function removeElementsExcept(selector) {
    let currentElement = document.querySelector(selector)
    while (currentElement !== document.body) {
        const parent = currentElement.parentNode;
        let idx = 0;
        while (parent.children.length > 1) {
            const element = parent.children[idx];
            if (currentElement !== element) {
                parent.removeChild(element)
            } else {
                idx = 1;
            }
        }
        currentElement = parent
    }
}