How to hide the parent div if the inner div is empty?

Question

I want to hide the philosophy-bubble div which is styled to look like a speech bubble but if the inner div is empty the bubble is going to be an empty speech bubble which needs to be hidden. How do I do that using jQuery?

<div class="philosophy-bubble">
   <div id="ctl00_PlaceHolderMain_ctl00_ctl15__ControlWrapper_RichHtmlField" class="ms-rtestate-field" style="display:inline" aria-labelledby="ctl00_PlaceHolderMain_ctl00_ctl15_label">
     <DIV id="ctl00_PlaceHolderMain_ctl00_ctl15_RichHtmlField_displayContent" class="ms-rtestate-write" EmptyPanelId="ctl00_PlaceHolderMain_ctl00_ctl15_RichHtmlField_EmptyHtmlPanel" style="display:;">
     PROVIDING CARING AND KNOWLEDGABLE MEDICAL CARE TO PATIENTS
     </DIV>
  </div>
</div> 

Answer 1

This should do it for every such DIV on the page:

$('.philosophy-bubble').each(function() {
    var c = $(this).children().children(); // find the inner div
    if (c.html().length == 0) {            // check its content's length
        $(this).hide();
    }
});

Answer 2

if( !($('.philosophy-bubble').html()) ) $('.philosophy-bubble').hide();

Answer 3

Use .text() and $.trim to analyze the non-HTML content of each div:

$('div.philosophy-bubble').each(function() {
    if ($.trim($(this).text())==='') {
        $(this).hide();    // or .remove()
    }
});