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?

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?

• javascript
• jquery
• loops
• class

• 2 <div class="child-2"> </div> isn't empty - it has a newline character and spaces ... <div class="child-2"></div> is empty ... try if (singleDiv.innerHTML.trim() == "") { – Bravo Commented Aug 10, 2021 at 14:32
• I assume that your condition is triggering, you can console.log("Test"); to see if it responds properly, I assume it does though; which leads me to your singleDiv.closest("section"). You can do parentElement twice? – BGPHiJACK Commented Aug 10, 2021 at 14:34
• An alternative, depending on your definition of "empty" (if it doesn't have any child divs, ignoring text) and tagged jquery is to use .children() eg if ($(singleDiv).children() === 0) $(singleDiv).addClass("hide-section") - this could be more efficient, but shows the concept. – fdomn-m Commented Aug 10, 2021 at 14:53

1 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");
}