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以及它的＆＃39;来递归完成的。方法.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>

之前＆＃34;正确＆＃34;回答我的问题是在<span> <br> Some text</span>给出了错误的结果。经过测试后，其他答案都是错误的。

请参阅我的JSfiddle：http://jsfiddle.net/EGVQH/2/

Answer 1

你可以尝试这个，不用递归，使用每个，检查非文本包含标签，如img

$(function(){
    $('#mydiv').find('span').each(function(){
        var self = $(this);
        if($.trim(self.html())==""){
            self.remove();
        }else if($.trim(self.text())=="" && self.has('img').length ==0)
            self.remove();
    });
});

您可以更改$(this).has('img').length ==0以获取输入，iframe或包含$(this).has('img, input, iframe').length ==0

等标签的任何其他非文字内容

Answer 2

这是一种解决问题的快捷方式

$('#mydiv span br').remove();
while($('#mydiv span:empty').length > 0){
    $('#mydiv span:empty').remove();
}

Answer 3

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

使用on：

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

Answer 4

这应该这样做。但这也将删除图像。您需要添加条件以不删除图像。

removeempty($('#mydiv'));
function removeempty(parentnode){
var children=$(parentnode).children();
for(var i=0;i<children.length;i++){
    var text=$(children[i]).text();
    if($.trim(text).length==0){
        $(children[i]).remove();
    }
    else{
        removeempty($(children[i]));
    }
}
return;
}

Answer 5

你可以使用过滤功能来获取你需要的元素，而不是试图找到你不需要的东西..然后克隆并将它们添加到你的div

var x = $('#mydiv *').filter(function(){
   // return elements with a children of img or with some text
   return  $(this).children('img').length || $.trim($(this).text()).length ;
}).clone();
$('#mydiv').html(x);

http://jsfiddle.net/wirey00/5jymK/

Answer 6

$.each($("#mydiv").find("span"),function(index,value){
   if($.trim($(value).html()))
   {
        $(value).remove();
   }
});

如果你想删除中断，请在每个语句之前添加：

$("#mydiv br").remove();

jQuery递归删除空子

6 个答案: