8

我有一组嵌套的 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();

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

已编辑

这是我的 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/

4

6 回答 6

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

使用：

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

于 2012-10-25T15:59:30.910 回答
2

你可以试试这个，不用递归，使用每个，检查非文本包含标签，比如 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

于 2012-10-25T14:07:39.447 回答
2

这是解决问题的一种非常快速而肮脏的方法

$('#mydiv span br').remove();
while($('#mydiv span:empty').length > 0){
    $('#mydiv span:empty').remove();
}
于 2012-10-25T14:15:48.047 回答
1

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

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;
}​
于 2012-10-25T14:07:03.673 回答
1

您可以使用过滤器功能来获取您需要的元素，而不是试图找到您不需要的元素..然后克隆并将它们添加到您的 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/

于 2012-10-25T14:14:39.197 回答
1 
$.each($("#mydiv").find("span"),function(index,value){
   if($.trim($(value).html()))
   {
        $(value).remove();
   }
});

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

$("#mydiv br").remove();
于 2012-10-25T14:21:02.207 回答