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>得到了錯誤的結果<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");​

使用：

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