How to remove all empty spans in <div>?

user_19235307 0
Viewed 59

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>

javascript
1 Answers

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.

user_66444170
Related