1

如果 HTML 元素不包含任何内容，我希望能够删除它们。

假设我们有一些标记并针对所有 ' collapse' 类：

<div class='collapse'>[CONTENT?]</div>

如果有一些内容，那么不要做任何事情。

但是如果没有内容 - 没有字符串字符或空格 - 则完全删除 div 元素。

这在简单的情况下很容易实现，但对于嵌套内容，它会稍微复杂一些。

这是一个演示，如果您尝试删除 [CONTENTX?] 字符串，然后查看 HTML 结构是什么，您会注意到它不能完全工作。

如果一个 div 只有其他没有内容的 div，那么应该将其视为没有字符或空格。

如果我们删除所有 [CONTENTX?] 字符串，那么我们应该看不到 HTML 结构。

有什么方法可以处理这个？

jsfiddle：http: //jsfiddle.net/97udq/

HTML：

<div id='container'>

    <div class='collapse'>
    [CONTENT1?]    
    </div>

    <div class='collapse'>
        [CONTENT2?]    
        <div class='collapse'>
            [CONTENT3?]    
            <div class='collapse'>[CONTENT4?]</div>
            <div class='collapse'>[CONTENT5?]</div>
        </div>
    </div>

</div>

Javascript：

$(function(){
    // function
    collapse();
    // Show HTML structure
    alert($('#container').html());
});

function collapse(){
    // Loop thru all collapse elements
    $('.collapse').each(function(){
        // Check for pure whitespace
        if($(this).html().replace(/\s+/g, '').length==0){
            // Nothing to see, so remove.
            $(this).remove();
        }
    });
}

CSS：

.collapse{
    height:20px;
    border:1px solid red;
}
4

3 回答 3

2

我认为这可以完成工作；

它只是使用text()而不是html();

这是文档。

这个添加了 trim()，但我认为这不是你想要的。

function collapse(){
    $('.collapse').each(function(){
        if($(this).text().length==0){
            $(this).remove();
        }
    });
}
于 2013-06-10T18:31:04.817 回答
2

这是完成您想要的另一种方法。它从下往上递归 DOM 修剪节点。希望这可以帮助。

    function prune(root) {
       $.each($(root).children(), function(){
          prune($(this));
       });
       if($(root).html().replace(/\s+/g, '').length==0 && $(root).hasClass("collapse")){
          $(root).detach();
       }
   }

代码集成到您的 JSFiddle

于 2013-06-10T18:53:56.953 回答
1

您需要重新创建.each()循环，但相反。就像这样：

function collapse(){
    var el = $('.collapse');
    for(var i = el.length - 1; i >= 0; i--){
        if(el[i].innerHTML.replace(/\s+/g, '').length==0){
            $(el[i]).remove();
        }
    }
}

它将首先删除孩子，然后检查父母。

这里有一个小提琴：http: //jsfiddle.net/97udq/5/

编辑 ：

我误解了您的问题，这是正确的解决方案：

function collapse(){
    $('.collapse').each(function(){
        var $this = $(this)
        var clone = $this.clone();
        clone.children().remove();
        if(clone.html().replace(/\s+/g, '').length==0){
            $this.children().appendTo($this.parent());
            $this.remove()
        }
    })
}

基本上，您克隆当前 div，删除其子项，然后检查是否有一些文本。如果没有，你将他的孩子附加到他的父母身上

小提琴：http: //jsfiddle.net/97udq/9/

于 2013-06-10T18:38:49.750 回答