javascript - jQuery递归地删除空 child

Question

我有一组嵌套的 html 标签，我想删除所有没有文本的标签及其子标签。

示例:

<div id="mydiv">

<span></span>
<span><br></span>
<span> <span><br></span> </span>
<span>   <span><br> <span></span> </span>  </span>

<span> <img src="someimg.jpg" width="100" height="100"> </span>
<span>some text</span>

</div>​

所以我希望带有图像和文本的 span 保留下来，而其他的则离开。

我需要函数执行后的结果:

<div id="mydiv">

<span> <img src="someimg.jpg" width="100" height="100" /> </span>
<span>some text</span>
</div>​

我发现，这是通过 JavaScript 或 jQuery 的方法 .children() 递归完成的这是我想使用的代码，但我不知道如何构建递归:

 var remove_filter = function () {
            children= $(this).children();

            for (var i = -1, l = children.length; ++i < l;) {
                if ($(children[i]).text() == "") {
                    $(children[i]).remove();
                }
                //may be recursion here
                //else if(){
                //}
            }
            return $(this).text() == "" && $(this).children().length == 0;
}
$('#mydiv').find('span').filter(remove_filter).remove();

此代码已损坏，它删除并留下空跨度...我如何通过递归获得结果？

已编辑

这是我的 jsfiddle:http://jsfiddle.net/EGVQH/

编辑 2 次

我在正确答案中发现了一个错误，但它很小。如果我有这样的代码:

<div id="mydiv">
<span> <br> Some text</span>
<span>   <span><br> <span></span> </span>  </span>

<span> <img src="someimg.jpg" width="100" height="100"> </span>
<span>some text</span>

</div>​

我假设它会导致:

<div id="mydiv">
<span> Some text</span>
<span> <img src="someimg.jpg" width="100" height="100" /> </span>
<span>some text</span>
</div>​

我的问题之前的“正确”答案在 <span> <br> Some text</span> 给出了错误的结果.测试了一下其他答案都是错误的。

查看我的 JSfiddle:http://jsfiddle.net/EGVQH/2/

Answer 1

function rem(root) {
    var $root = $(root);
    $root.contents().each(function() {
        if (this.nodeType === 1) {
            rem(this);
        }
    });

    if (!$root.is("area,base,col,command,embed,hr,img,input,keygen,link,meta,param,source,track,wbr") && !$root.html().trim().length) {
        $root.remove();
    }
}


rem("#mydiv");​

使用于:

<div id="mydiv">
<span> <br> Some text</span>
<span>   <span><br> <span></span> </span>  </span>

<span> <img src="someimg.jpg" width="100" height="100"> </span>
<span>some text</span>

</div>​

叶子:

<div id="mydiv">
<span>  Some text</span>


<span> <img src="someimg.jpg" width="100" height="100"> </span>
<span>some text</span>

</div>

http://jsfiddle.net/LEKaL/1/