Hide a div if content is empty

Question

Philosophy bubble is like a quote/speech bubble div styled which has a sharepoint control inside, the richHtmlField which lets users to type in content while editing page, b

Answer 1

Use jQuery's :empty selector:

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

Here's a working fiddle.

Alternative

You could also use the filter() function to find all empty div's and hide:

//All divs
$('div').filter(function() {
        return $.trim($(this).text()) === ''
}).hide()

//div's 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: the :empty selector will be more performant. See jsPerf.

Answer 2

Something like:

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

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

EDIT

better by using:

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

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

Answer 3

var myDiv =  $('#myDiv');

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