如果嵌套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>