如果一個框爲空，在jQuery中隱藏div

Question

我創建了一個使用div的紅框，這個框在框內是空的，帶有紅框外的鏈接......就像這樣。

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

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

而且我已經加入紅框內的PHP代碼，它的作用是當文件打開時，它只會顯示紅色方框內與文件名稱的按鈕。

我想要做的是當加載頁面時，如果紅色框爲空（紅色框內沒有按鈕），然後自動隱藏它，如果它不是空的，則顯示帶有按鈕的紅色框。

我還有另一個按鈕，可以讓我爲紅色框切換幻燈片，無論是否爲空。

看到代碼

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

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

我CSSlike這與試圖...

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

和jQuery的像

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

沒有這些工作由於div的紅盒子也涉及空格，即使它是一個空框，或者在框中顯示PHP代碼並仍然考慮cs s或jquery，而不是一個空盒子。

如何解決自動隱藏如果一個盒子是空的？

見示例代碼jsfiddle

Answer 1

您可以從包裝盒中拉只是文本，如果它只是包含空白，你修剪後，會看到它爲空。例如：

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

，並更新了自己的提琴工作https://jsfiddle.net/t1oum9xe/