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都将被删除。（也许你可能只有一个...）

找到空DOM元素并使用Jquery / Javascript删除它们

1 个答案: