CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3004356
user3004356

Reputation: 880

How can I hide a div when content is not displayed

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

Upvotes: 2

Views: 252

Answers (5)

Satinder singh
Satinder singh

Reputation: 10198

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

Upvotes: 0

Sergio
Sergio

Reputation: 28837

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';
    }
});

Upvotes: 1

zzlalani
zzlalani

Reputation: 24344

add this javascript

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

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

Upvotes: 4

danny.hu
danny.hu

Reputation: 110

do css: 

 #row-3{
        display: none;
    }

Upvotes: 0

NoobEditor
NoobEditor

Reputation: 15871

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

Upvotes: -1

Related Questions