CODEWITHSUNDEEP
javascripthtmldom
user2064000
user2064000

Reputation:

Removing all nodes from the DOM except for one subtree

I have a page structured like this:

<body>
  <div class="one">
    <div class="two">
      <p class="three">Some text</p>
    </div>
  </div>
  <div class="four">
    <div class="five">
      <p class="six">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 class="four">
    <div class="five">
      <p class="six">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?

Upvotes: 3

Views: 626

Answers (2)

ggorlen
ggorlen

Reputation: 56895

parent.removeChild(element) changes the length of the iterated collection so elements are skipped. You can use [...parent.children] to spread the HTMLCollection into an array, making it safe for removals.

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 class="one">
  <div class="two">
    <p class="three">Some text</p>
  </div>
</div>
<div class="four">
  <div class="five">
    <p class="six">Some other text</p>
  </div>
</div>

Upvotes: 0

Jake Holzinger
Jake Holzinger

Reputation: 6063

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
    }
}

Upvotes: 1

Related Questions