CODEWITHSUNDEEP
jquery
Ido Angel-Bohadana
Ido Angel-Bohadana

Reputation: 165

hide div if all children of another div are empty

I have this code:

<div class="lexentry-bottom">
  <div class="also-others">
    <h2 class="related-entries" data-fontsize="25" data-lineheight="37">RELATED ITEMS</h2>
    <div class="istax wrote">
      <h3 data-fontsize="18" data-lineheight="27">בקשרNOT EMPTY</h3>
    </div>
    <div class="istax inf">
    </div>
    <div class="istax cont">
    </div>
    <div class="istax sup">
    </div>
    <div class="istax supby">
    </div>
  </div>
</div>
<div class="lexentry-bottom">
  <div class="also-others">
    <h2 class="related-entries" data-fontsize="25" data-lineheight="37">RELATED ITEMS</h2>
    <div class="istax wrote">
      <h3 data-fontsize="18" data-lineheight="27">בקשרNOT EMPTY</h3>
    </div>
    <div class="istax inf">
    </div>
    <div class="istax cont">
    </div>
    <div class="istax sup">
    </div>
    <div class="istax supby">
    </div>
  </div>
</div>
<div class="lexentry-bottom">
  <div class="also-others">
    <h2 class="related-entries" data-fontsize="25" data-lineheight="37">RELATED ITEMS</h2>
    <div class="istax wrote">
      <h3 data-fontsize="18" data-lineheight="27">בקשרNOT EMPTY</h3>
    </div>
    <div class="istax inf">
    </div>
    <div class="istax cont">
    </div>
    <div class="istax sup">
    </div>
    <div class="istax supby">
    </div>
  </div>
</div>

This is basically a search results box. Sometimes the .istax divs are empty, sometimes not (as you see in the first child).

I want to try and hide the H2 (.related-entries) if ALL .istax are empty.

I've tried:

$(".lexentry-bottom").each(function() {
if ( $(this).find('.also-others').children().length > 0 )
    {
    $(this).find(".related-entries").hide();
    }
});

But that didn't seem to do the job.

Any idea how to get this working?

Upvotes: 1

Views: 80

Answers (3)

pguardiario
pguardiario

Reputation: 55012

It sounds like you want:

$('.related-entries:not(:has(~ .istax *))').hide()

Upvotes: 0

Cuong Le Ngoc
Cuong Le Ngoc

Reputation: 11975

You can use .istax:not(:empty) to find the .istax that is not empty (note that if there is any whitespace between <div class="istax ..."></div>, it's not empty anymore). If it's not exist then hide the .related-entries.

$(".lexentry-bottom").each(function() {
if (!$(this).find('.istax:not(:empty)').length)
    $(this).find(".related-entries").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="lexentry-bottom">
  <div class="also-others">
    <h2 class="related-entries" data-fontsize="25" data-lineheight="37">RELATED ITEMS 1</h2>
    <div class="istax wrote">
      <h3 data-fontsize="18" data-lineheight="27">בקשרNOT EMPTY</h3>
    </div>
    <div class="istax inf"></div>
    <div class="istax cont"></div>
    <div class="istax sup"></div>
    <div class="istax supby"></div>
  </div>
</div>
<div class="lexentry-bottom">
  <div class="also-others">
    <h2 class="related-entries" data-fontsize="25" data-lineheight="37">RELATED ITEMS 2</h2>
    <div class="istax wrote">
      <h3 data-fontsize="18" data-lineheight="27">בקשרNOT EMPTY</h3>
    </div>
    <div class="istax inf"></div>
    <div class="istax cont"></div>
    <div class="istax sup"></div>
    <div class="istax supby"></div>
  </div>
</div>
<div class="lexentry-bottom">
  <div class="also-others">
    <h2 class="related-entries" data-fontsize="25" data-lineheight="37">RELATED ITEMS 3</h2>
    <div class="istax wrote"></div>
    <div class="istax inf"></div>
    <div class="istax cont"></div>
    <div class="istax sup"></div>
    <div class="istax supby"></div>
  </div>
</div>

Or if you want to ignore the white space, you can use .filter():

$(".lexentry-bottom").each(function() {
let not_empty = $(this).find('.istax').filter(function() {return $(this).html().trim()})
if (!not_empty.length)
    $(this).find(".related-entries").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="lexentry-bottom">
  <div class="also-others">
    <h2 class="related-entries" data-fontsize="25" data-lineheight="37">RELATED ITEMS 1</h2>
    <div class="istax wrote">
      <h3 data-fontsize="18" data-lineheight="27">בקשרNOT EMPTY</h3>
    </div>
    <div class="istax inf">
    </div>
    <div class="istax cont">
    </div>
    <div class="istax sup">
    </div>
    <div class="istax supby">
    </div>
  </div>
</div>
<div class="lexentry-bottom">
  <div class="also-others">
    <h2 class="related-entries" data-fontsize="25" data-lineheight="37">RELATED ITEMS 2</h2>
    <div class="istax wrote">
      <h3 data-fontsize="18" data-lineheight="27">בקשרNOT EMPTY</h3>
    </div>
    <div class="istax inf">
    </div>
    <div class="istax cont">
    </div>
    <div class="istax sup">
    </div>
    <div class="istax supby">
    </div>
  </div>
</div>
<div class="lexentry-bottom">
  <div class="also-others">
    <h2 class="related-entries" data-fontsize="25" data-lineheight="37">RELATED ITEMS 3</h2>
    <div class="istax wrote">
    </div>
    <div class="istax inf">
    </div>
    <div class="istax cont">
    </div>
    <div class="istax sup">
    </div>
    <div class="istax supby">
    </div>
  </div>
</div>

Upvotes: 1

Dave Barnett
Dave Barnett

Reputation: 2226

How about this

$(document).ready(function() {
    $(".lexentry-bottom").each(function() {
    var $lexentryBottom = $(this);
    var $h2 = $lexentryBottom.find(".related-entries").first();
    var $istax = $lexentryBottom.find(".istax");
    var allEmpty = true;
      $istax.each(function() {
        var $div = $(this);
         if ($.trim($div.html()).length > 0) {
          allEmpty = false;
        }
     });

     if (allEmpty) {
        $h2.hide();
      }
    });
  });

If there needs to be no space at all in the div i.e.

 <div class="istax"></div>

instead of

<div class="istax">   </div>

then change if statement to 

if (!$div.is(":empty")) {
     //...
}

Upvotes: 1

Related Questions