Oculta un div si el contenido está vacío

Question

La burbuja de filosofía es como un divide de comillas/diálogos que tiene un control de sharepoint dentro, richHtmlField que permite a los usuarios escribir contenido mientras editan páginas, pero si el usuario elige dejarlo vacío , no habrá contenido en el div así que solo aparecerá la burbuja en la página que se verá divertida así que quiero esconder todo el div cuando no hay entrada de usuario o básicamente el div está vacío ?? ¿Cómo haces esto en jquery? :empty selector de

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

Answer 1

Uso de jQuery:

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

Aquí está a working fiddle.

Alternativa

También es posible usar la función filter() para encontrar todas vacías divs y ocultar:

//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.

Nota: el selector :empty será más eficiente. See jsPerf.

Answer 2

var myDiv = $('#myDiv'); 

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

Answer 3

Algo así como:

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

aquí es un violín: http://jsfiddle.net/IrvinDominin/XYr9T/1/

EDITAR

mejor usando:

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

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