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.