ネストされたdivが空の場合は、親ディビジョンを非表示にします。

Question

ネストされたdivが空の場合（ホワイトスペースノードを含む）、外側のdivを非表示にしようとしています。私は空白が存在しない場合に機能するソリューションを見つけた： Hide parent DIV if <li> is Empty

ホワイトスペースが存在したとき、私はそれを動作させる必要がある、すなわち：

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

Example fiddle

Answer 1

Working fiddle

あなたは:emptyと:contain()セレクタの両方を使用することができます。

$("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

を// Jqueryを使用して試してください

<script> 

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

</script> 

このことができます

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

希望：

Answer 3

あなたは、各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>