1

I need to remove all empty spans from one of div. The problem is, once forEach loop is done, previously not empty spans are empty now so I thought I could use while loop but it seems to loop itself. What did I do wrong?

function removeEmptySpans() {
  const tree = document.getElementById('tree')
  const spans = Array.from(tree.querySelectorAll("span"))

  let emptySpansExist = true

  while (emptySpansExist) {
    emptySpansExist = false
    spans.forEach(span => {
      if (span.innerHTML === "") {
        span.remove()
        console.log("empty span")
        emptySpansExist = true
      } else {
        console.log("not empty span")
      }
    })
  }
}
<div id="tree" onClick={removeEmptySpans}>
    <span>
        <span>
            <span></span>
        </span>
        <span>
            <span></span>
            <span><span></span><span></span></span>
            <span><span></span>content</span>
        </span>
    </span>
    <span></span>
</div>
pilchard
  • 12,414
  • 5
  • 11
  • 23
Andy
  • 11
  • 1

1 Answers1

1

function removeEmptySpans() {
  const tree = document.getElementById('tree');
  const spans = Array.from(tree.querySelectorAll("span")).reverse();
  for(let i=0; i<spans.length; i++) {
    if (spans[i].innerHTML.trim() === "") {
      // console.log(i, spans[i], spans[i].innerHTML, "---");
      spans[i].remove();
    }
  }
}

removeEmptySpans();

console.log('Remaining spans:', tree.querySelectorAll("span").length);
<div id="tree" onClick="removeEmptySpans()">
  <span>
                        <span>
                            <span></span>
  </span>
  <span>
                            <span></span>
  <span><span></span><span></span></span>
  <span><span></span>content</span>
  </span>
  </span>
  <span>

                    </span>
</div>

The code makes a list of all the possible spans inside the tree element.

The query selector will build a forward list but to avoid having conflicts you just need to reverse the list so you can get the empty children removed first and avoid removing a parent having different spans which some of are filled of content.

The trim method in the conditional statement allows you to remove all the empty spaces at the prefix and suffix of your innerHTML to avoid confusing the functions with spaces only.

haddagart
  • 68
  • 1
  • 8
  • 1
    They get removed too even if they contain an empty space. I tried the code and it works fine it will keep only that of span with content and the rest is to be removed regardless of the parent otherwise the solution would be feasible through a tree data structure for parent-child relationship preservation. – haddagart May 30 '22 at 21:54
  • 1
    I didn't note your `reverse()`, nice and clean. It is good to include some explanation with your answer and links to relevant documentation when appropriate instead of just posting code. – pilchard May 30 '22 at 22:02
  • 1
    Clever: [Using querySelectorAll(). Is the result returned by the method ordered?](https://stackoverflow.com/questions/8203770/using-queryselectorall-is-the-result-returned-by-the-method-ordered) seems to guarantee that the leaves will always be processed before interior nodes so this appears to be the best approach. – ggorlen May 30 '22 at 22:32