How can I hide a div when content is not displayed

Question

I'm new to HTML and CSS. Now I have a page with the below code:
With content displayed :

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

The above code has two contents displayed.
Without content displayed :

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

Now, my problem is I want to hide if content is not present. I don't want to display <div id="row-3"> when not even one content is there . How can I do this?

EDIT I did this , still not working

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

if there is no content, it will not show anything on your page....why do you want to hide it in the first place then??? — NoobEditor, Nov 29 '13 at 07:08
Alternately, how are you generating your row? If nothing is there, why generate it? — Amadan, Nov 29 '13 at 07:09
You can try to append divs using JS. If content is present append it else don't. — Kishori, Nov 29 '13 at 07:09

score 4 · Accepted Answer · answered Nov 29 '13 at 07:20

4

add this javascript

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

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

answered Nov 29 '13 at 07:20

zzlalani

22,960
16
44
73

score 1 · Answer 2 · answered Nov 29 '13 at 07:23

Try this:

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

score 0 · Answer 3 · answered Nov 29 '13 at 07:12

0

do css:

 #row-3{
        display: none;
    }

answered Nov 29 '13 at 07:12

danny.hu

110
3

Satinder singh · Answer 4 · 2013-11-29T07:35:07.897

0

You need to check the content length if it greater then zero display it else remove or hide it depned on your condition

 var getLength = $("#row_new .groupz_column1").html().trim().length;

    if (getLength == 0) {
        // $("#row_new").remove(); // for remove
        $("#row_new").hide(); // for hide
    }

LIVE DEMO

edited Nov 29 '13 at 07:35

answered Nov 29 '13 at 07:26

Satinder singh

10,100
16
60
102

score -1 · Answer 5 · edited May 23 '17 at 11:49

-1

Considering the comment, add white-space: nowrap; to your css for class groupz_column1.....it will remove the white space which are appearing in the empty div

Additionally, check this link, it has similar issue as yours : Remove "whitespace" between div element

edited May 23 '17 at 11:49

Community

1
1

answered Nov 29 '13 at 07:12

NoobEditor

15,563
19
81
112

check the `!doc type` mentioned in the reference link...that might help! – NoobEditor Nov 29 '13 at 07:17

How can I hide a div when content is not displayed

5 Answers5