How can I check whether innerHTML is empty?

Question

so i am trying to set a Class on a Parent Element (Section), when the second Child Div innerHTML is empty.

So for example: (This Section should get a class of "hide-section" to hide it)

<section class="ef-area">
   <div class="child-1">
       <div class="child-2">
       </div>
   </div>
</section>

This one should not be hidden because "child-2" is not empty

<section class="ef-area">
   <div class="child-1">
      <div class="child-2">
         <div class="child-3">
            ...//What Ever
         </div>
      </div>
  </div>
</section>

I looped over all "ef-area" sections but how can i set only those sections to display = none when the second child (child-2) is empty.

What I did is:

    let efAreaDivs = document.querySelectorAll(".ef-area > div > div");
  
    for (singleDiv of efAreaDivs) {
    
    if (singleDiv.innerHTML == "") {
      singleDiv.closest("section").classList.add("hide-section");
    }

The class "hide-section" never gets set.

I think js always ignores it, because there are singleDiv´s that are not empty or am I wrong?

Answer 1

The content of <div class="child-2"> below

<section class="ef-area">
   <div class="child-1">
       <div class="child-2">
       </div>
   </div>
</section>

is NOT an empty string ... it is "\n "

You need to trim the innerHTML (which get's rid of whitspace at the beginning and end of the string, in this case everything)

if (singleDiv.innerHTML.trim() == "") {
   singleDiv.closest("section").classList.add("hide-section");
}