如果没有显示内容，如何隐藏div？

Question

我是HTML和CSS的新手。现在我有了一页代码如下：

内容显示为的：

<div id="row-3" ><!-- Row 3 start here -->

   <div class="groupz_column1" style="margin-right:0px;"><a href="http://www.xyz.in/ads/test.jpg" title=""><h2>null</h2><img align="left" width="100px" height="70px" src="http://www.xyz.in/ads/test.jpg?id=225"><p>Sign off for limited time offer<p></a></div>
   <div class="groupz_column1" style="margin-right:0px;"><a href="http://www.xyz.in/ads/test.jpg" title=""><h2>Test</h2><img align="left" width="100px" height="70px" src="http://www.xyz.in/ads/test.jpg?id=194"><p>A wonderful opportunity <p></a></div>
   <div class="groupz_column1" ></div>
   <div class="groupz_column1" ></div>
   <div class="clear clearfix"></div>
</div>  

上面的代码显示了两个内容。

不显示内容的 :

<div id="row-3" ><!-- Row 3 start here -->
   <div class="groupz_column1" ></div>
   <div class="groupz_column1" ></div>
   <div class="groupz_column1" ></div>
   <div class="groupz_column1" ></div>
   <div class="clear clearfix"></div>
</div>  

现在，我的问题是，如果内容不存在，我想要隐藏。当连一个内容都没有的时候，我不想显示<div id="row-3">。我该怎么做？

编辑我做了这件事，仍然不起作用

   <div id="row-3" style="div:empty { display: none }">

Answer 1

添加此javascript

$(document).ready(function () {
   var doHide = true;
   $("#row-3 div").each(function () {
      if ($(this).html() != '') {
          doHide = false;
      }
   });

   if ( doHide ) {
      $("#row-3").hide();
   }
});

Answer 2

试试这个：

$('div[id^=row-]').each(function () {
    var content = false;
    $(this).find('div').each(function () {
        if (this.innerHTML != '') {
            content = true
        };
    });
    if (!content) {
        this.style.display = 'none';
    }
});

Answer 3

做css：

 #row-3{
        display: none;
    }