查找空的DOM元素，然后使用Jquery / Javascript將其刪除

Question

我有三列，每列包含一個DIV 。 這些DIV充滿了數據，但偶爾會發生，這些DIV為空，在這種情況下，它們會弄亂我的布局。 現在，我要檢查DIV是否填充有數據（html），如果沒有，請刪除它們。 我做了一些if陳述，但是我確信這可以做得更流暢。

這是我的js代碼：

if ($.trim($(".fcol1").html()) =='') {
   $(".fcol1").remove();
}

if($.trim($(".fcol2").html()) == '') {
   $(".fcol2").remove();
}

if($.trim($(".fcol3").html()) == '') {
   $(".fcol3").remove();
}

那么，有沒有辦法縮短這段代碼？

Answer 1

如果它們確實是空的，則可以執行以下操作：

$(".fcol1:empty, .fcol2:empty, .fcol3:empty").remove();

...但是，即使它們中甚至有一個空白文本節點，也無法正常工作。 您可以這樣做：

$(".fcol1, .fcol2, .fcol3").filter(function() {
    return !$.trim(this.innerHTML);
}).remove();

---

請注意，原始代碼僅檢查與選擇器匹配的第一個元素，如果該元素為空，則刪除所有匹配的元素，無論它們是否為空。 例如，如果第一個 .fcol1為空，則刪除所有 .fcol1 。 （也許您可能只有一個...）