1つの内部divが空の場合のdivを非表示にするJqueryまたはCSS3

Question

同じクラス名で異なるdivに表示するデータがあります。各divにはさらに2つのdivがあります。

<div class="div1"> 
    <div class="div2">Abc</div> 
    <div class="div3"><?php echo $row['SOME VALUE']; ?></div> 
</div> 

<div class="div1"> 
    <div class="div2">Bcd</div> 
    <div class="div3"><?php echo $row['SOME VALUE']; ?></div> 
</div> 

<div class="div1"> 
    <div class="div2">Cde</div> 
    <div class="div3"><?php echo $row['SOME VALUE']; ?></div> 
</div> 

<div class="div1"> 
    <div class="div2">def</div> 
    <div class="div3"><?php echo $row['SOME VALUE']; ?></div> 
</div> 

空の「div3」を含む「div1」を削除します。それでも私は "div3"が空でなく "div1"を表示するかどうかをチェックするために、すべてのdivブロックに対してif文を繰り返し使用しています。

<?php 

    if(($rown['SOME VALUE'])!=''{ 
?> 

<div class="div1"> 
    <div class="div2">Bcd</div> 
    <div class="div3"><?php echo $row['SOME VALUE']; ?></div> 
</div> 

<?php 

} 

?> 

空の「div3」を含む「div1」を削除するには、JqueryコードまたはCSS3コードを1回書くことは可能ですか？

$(".div3").each(function(i, el) { 
    if ($(el).text() == "") { 
     $(el).parent().remove(); 
    } 

    // variant with trimming 
    if ($.trim($(el).text()) == "") { 
     $(el).parent().remove(); 
    } 

}); 

Simple fiddle：eachと

Answer 1

フィルターすべて.div3のdivとは、空のテキストを持っているものを削除します。