javascript - 如果一个内部div为空Jquery或CSS3，则隐藏div

我有一些数据要在具有相同类名的不同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块重复使用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”。

最佳答案

用.div3过滤所有each 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。