如果嵌套div为空，则隐藏父Div

Question

当嵌套的div为空（包括空白节点）时，我试图隐藏外部div。 我发现了一个没有空格的解决方案： 如果<li>为空，则隐藏父DIV

当存在空白时，我需要它工作，即：

  <div class="gen-customer">
    <div class="wrapper">
      <div class="heading">Hidden if working 1</div>
       <div class="content">
      <div class="product"> </div>
    </div>
   </div>
 </div>

小提琴的例子

Answer 1

工作提琴

您可以同时使用:empty和:contain()选择器：

$("div.product:contains(' '), div.product:empty").closest('div.wrapper').hide();

希望这可以帮助。

 $("div.product:contains(' '), div.product:empty").closest('div.wrapper').hide() 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="gen-customer"> <div class="wrapper"> <div class="heading">Hidden if working 1</div> <div class="content"> <div class="product"> </div> </div> </div> </div> <div class="gen-customer"> <div class="wrapper"> <div class="heading">Visible if working 2</div> <div class="content"> <div class="product">text</div> </div> </div> </div> <div class="gen-customer"> <div class="wrapper"> <div class="heading">Hidden if working 3</div> <div class="content"> <div class="product"></div> </div> </div> </div> 

Answer 2

您可以遍历每个div.product并修剪文本以删除空格。 如果还剩下任何东西，请显示它，否则，隐藏它的包装器。

 $("div.product").each(function() { if ($(this).text().trim() == '') { $(this).closest('div.wrapper').hide() } }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="gen-customer"> <div class="wrapper"> <div class="heading">Hidden if working 1</div> <div class="content"> <div class="product"></div> </div> </div> </div> <div class="gen-customer"> <div class="wrapper"> <div class="heading">Visible if working 2</div> <div class="content"> <div class="product">text</div> </div> </div> </div> <div class="gen-customer"> <div class="wrapper"> <div class="heading">Hidden if working 3</div> <div class="content"> <div class="product"></div> </div> </div> </div> 

Answer 3

//尝试使用jQuery

<script>

    //A perfect reference in Jquery...
    var element=$('#target_child');
    if($(element).html()==''){
        $(element).parent().hide()
    }else{
        //do some work
    }

</script>