javascript - 当所有 child 都有特定类(class)时隐藏父 div

Question

我有这样的 html:

<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>

我需要的是隐藏整个 ".woof_container"，当里面的所有 "li" 元素都有 ".hide" 类时。

所以在这个例子中 ".woof_container.woof_container_producer" 应该隐藏但是 ".woof_container.woof_container_category" 应该仍然可见。

你能帮我吗？谢谢!

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>