jQuery递归删除空子

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>?

所以我想要留下图像和文字的跨度,其他人离开.

我的功能之后我需要那个结果:

<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();

这段代码被破坏了,它删除并留下空的空间......我如何通过递归获得我的结果？

EDITED

这是我的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) {\n    var $root = $(root);\n    $root.contents().each(function() {\n        if (this.nodeType === 1) {\n            rem(this);\n        }\n    });\n\n    if (!$root.is("area,base,col,command,embed,hr,img,input,keygen,link,meta,param,source,track,wbr") && !$root.html().trim().length) {\n        $root.remove();\n    }\n}\n\n\nrem("#mydiv");\xe2\x80\x8b\n

\n\n

使用于：

\n\n

<div id="mydiv">\n<span> <br> Some text</span>\n<span>   <span><br> <span></span> </span>  </span>\n\n<span> <img src="someimg.jpg" width="100" height="100"> </span>\n<span>some text</span>\n\n</div>\xe2\x80\x8b\n

\n\n

树叶：

\n\n

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

\n\n

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

\n