Hide parent div when all child has specific class

Question

I have html like this:

<div class="woof_container woof_container_producer">
 <div class="woof_container_inner">
  <div class="woof_block_html_items">
   <ul class="woof_list">
    <li class="woof_term hide">Nike<span class="quantity">(0)</span></li>
    <li class="woof_term hide">Reebok<span class="quantity">(0)</span></li>
    <li class="woof_term hide">Adidas<span class="quantity">(0)</span></li>
    <li class="woof_term hide">Puma<span class="quantity">(0)</span></li>
   </ul>
  </div>
 </div>
</div>

<div class="woof_container woof_container_category">
 <div class="woof_container_inner">
  <div class="woof_block_html_items">
   <ul class="woof_list">
    <li class="woof_term hide">Jacket<span class="quantity">(0)</span></li>
    <li class="woof_term">T-shirt<span class="quantity">(3)</span></li>
    <li class="woof_term hide">Dress<span class="quantity">(0)</span></li>
    <li class="woof_term hide">Boots<span class="quantity">(0)</span></li>
   </ul>
  </div>
 </div>
</div>

What I need is to hide entire ".woof_container" when all "li" items inside has ".hide" class.

So in this example ".woof_container.woof_container_producer" should hide but ".woof_container.woof_container_category" should be still visible.

Can You help me with that? Thx!

Answer 1

 $('.woof_container').each(function(){ var hide = true; $(this).find('li').each(function(){ if(!$(this).hasClass('hide')) { hide =false; } }); if(hide) { $(this).remove(); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="woof_container woof_container_producer"> <div class="woof_container_inner"> <div class="woof_block_html_items"> <ul class="woof_list"> <li class="woof_term hide">Nike<span class="quantity">(0)</span></li> <li class="woof_term hide">Reebok<span class="quantity">(0)</span></li> <li class="woof_term hide">Adidas<span class="quantity">(0)</span></li> <li class="woof_term hide">Puma<span class="quantity">(0)</span></li> </ul> </div> </div> </div> <div class="woof_container woof_container_category"> <div class="woof_container_inner"> <div class="woof_block_html_items"> <ul class="woof_list"> <li class="woof_term hide">Jacket<span class="quantity">(0)</span></li> <li class="woof_term">T-shirt<span class="quantity">(3)</span></li> <li class="woof_term hide">Dress<span class="quantity">(0)</span></li> <li class="woof_term hide">Boots<span class="quantity">(0)</span></li> </ul> </div> </div> </div> 

Answer 2

Check all li, if it has hide class then hide parent div using each loop.

 $('.woof_container').each(function(){ var hasAllHide = true; $(this).find('li.woof_term').each(function(){ if(!$(this).hasClass('hide')){ hasAllHide = false; } }); if(!hasAllHide){ $(this).css('display','none'); } }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="woof_container woof_container_producer"> <div class="woof_container_inner"> <div class="woof_block_html_items"> <ul class="woof_list"> <li class="woof_term hide">Nike<span class="quantity">(0)</span></li> <li class="woof_term hide">Reebok<span class="quantity">(0)</span></li> <li class="woof_term hide">Adidas<span class="quantity">(0)</span></li> <li class="woof_term hide">Puma<span class="quantity">(0)</span></li> </ul> </div> </div> </div> <div class="woof_container woof_container_category"> <div class="woof_container_inner"> <div class="woof_block_html_items"> <ul class="woof_list"> <li class="woof_term hide">Jacket<span class="quantity">(0)</span></li> <li class="woof_term">T-shirt<span class="quantity">(3)</span></li> <li class="woof_term hide">Dress<span class="quantity">(0)</span></li> <li class="woof_term hide">Boots<span class="quantity">(0)</span></li> </ul> </div> </div> </div> 

Answer 3

$(document).ready(function(){
   var parents = $("div.woof_container");
   parents.each(function(elem){
      if($(this).find("li.hide").length != $(this).find("li").length)
      {
          $(this).hide()
      }
   });
});

Answer 4

What I need is to hide entire ".woof_container" when all "li" items inside has ".hide" class.

You can

1) find the container element that have same count for element with class woof_term and 'hide' using filter function

2) hide elements returned in above step.

 $('.woof_container ').filter(function(){ var $this = $(this) return $this.find('.woof_term').length == $this.find('.woof_term.hide').length }).hide() 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <div class="woof_container woof_container_producer"> <div class="woof_container_inner"> <div class="woof_block_html_items"> <ul class="woof_list"> <li class="woof_term hide">Nike<span class="quantity">(0)</span></li> <li class="woof_term hide">Reebok<span class="quantity">(0)</span></li> <li class="woof_term hide">Adidas<span class="quantity">(0)</span></li> <li class="woof_term hide">Puma<span class="quantity">(0)</span></li> </ul> </div> </div> </div> <div class="woof_container woof_container_category"> <div class="woof_container_inner"> <div class="woof_block_html_items"> <ul class="woof_list"> <li class="woof_term">Jacket<span class="quantity">(0)</span></li> <li class="woof_term">T-shirt<span class="quantity">(3)</span></li> <li class="woof_term">Dress<span class="quantity">(0)</span></li> <li class="woof_term">Boots<span class="quantity">(0)</span></li> </ul> </div> </div> </div> 

Answer 5

1.use javascript
2.Do not set height property in the li's parents node's classes，when all li hide，the height will be 0