Hide div in jQuery, wenn eine Box leer ist

Question

Ich habe eine rote Box mit div erstellt, die innerhalb der Box leer ist, mit einem Link außerhalb der div roten Box ... so.

<div id="click"> click me </div> 

<div id="box"></div> 

Und ich habe innerhalb des Red Box PHP-Code hinzugefügt, was sie tut, ist, wenn die Datei geöffnet ist, wird es nur im Inneren der roten Box auf die Schaltfläche mit dem Dateinamen angezeigt.

Was ich versuche zu tun ist, dass beim Laden der Seite, wenn das rote Feld leer ist (keine Schaltfläche in der roten Box), dann es automatisch ausblenden, wenn es nicht leer ist, dann zeigen Sie die rote Box mit Tasten.

Ich habe auch eine andere Taste, mit der ich Schieberegler für die rote Box haben kann, egal ob leer ist oder nicht.

sehen den Code

$(document).ready(function() { 
    if ($('#box').contents().length == 0){ 
    $('#box').hide(); 
} else { 
    $('#box').show(); 
} 
}); 

$(document).ready(function(){ 
    $("#click").click(function(){ 
     $("#box").slideToggle("slow"); 
    }); 
}); 

ich mit diesem in CSSlike versucht ...

$("div:empty").hide(); 
div:empty { display: none } 

und in jQuery wie

$('div').filter(function() {  
    return $.trim($(this).text()) === ''  
}).remove() 

Keine dieser Arbeiten durch Red Box div ist auch mit Leerzeichen beschäftigt, auch wenn es eine leere Box ist, oder zeigt PHP-Code innerhalb der Box und immer noch für cs in Betracht ziehen s oder jquery, keine leere Box.

Wie kann ich das beheben, um automatisch zu verbergen, wenn eine Box leer ist?

Siehe Beispielcode in jsfiddle

Answer 1

Sie nur den Text aus dem Feld ziehen können, und wenn es nur Leerraum enthält, nachdem Sie es trimmen wird es als leer sehen. Beispiel:

$(document).ready(function() { 
    if ($('#box').text().trim().length == 0){ 
     $('#box').hide(); 
    } else { 
     $('#box').show(); 
    } 
}); 

und ein Update für Ihre Geige https://jsfiddle.net/t1oum9xe/