javascript - 隐藏 div，以防一个内部 div 为空 Jquery 或 CSS3

Question

我有一些数据要显示在具有相同类名的不同 div 中...其中每个 div 还有两个 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”。我仍然对每个 div block 重复使用 if 语句来检查“div3”是否不为空然后显示“div1”。

<?php 

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

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

<?php

}

?>

是否可以编写一次 Jquery 代码或 CSS3 代码来删除包含空“div3”的“div1”。

Answer 1

用each 过滤所有.div3 div，并删除那些有空文本的div:

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

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

});

Simple fiddle .