找到空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 s.(也许你可能只有一个...)