Hide div if content is empty

Question

The philosophy of the bubble is similar to the quote / speech bubble div, which has a sharepoint control inside, richHtmlField, which allows users to enter content while editing the page, but if the user decides to leave it blank, there will be no div content, so only the bubble appears on a page that will look funny, so I want to hide the entire div when there is no user record or basically the div is empty? How do you do this in jquery?

<div class="philosophy-bubble"> <PublishingWebControls:RichHtmlField FieldName="carephilosophy" runat="server"></PublishingWebControls:RichHtmlField> </div> 

Answer 1

Use jQuery :empty selector:

 $('.philosophy-bubble:empty').hide(); 

Here's a working fiddle .

Alternative

You can also use the filter() function to find all empty divs and hide:

 //All divs $('div').filter(function() { return $.trim($(this).text()) === '' }).hide() //div with a certain class $('.philosophy-bubble').filter(function() { return $.trim($(this).text()) === '' }).hide() //div with a specific ID $('#YourDivID').filter(function() { return $.trim($(this).text()) === '' }).hide() 

.. etc.

Note. selector :empty will be more functional. See jsPerf .

Answer 2

 var myDiv = $('#myDiv'); if (myDiv.text() == '') { myDiv.hide(); } 

Answer 3

Something like:

 if ($('.philosophy-bubble').is(":empty")){ $('.philosophy-bubble').hide(); } 

here is the fiddle: http://jsfiddle.net/IrvinDominin/XYr9T/1/

EDIT

better using:

 $('.philosophy-bubble:empty').hide() 

http://jsfiddle.net/IrvinDominin/XYr9T/3/