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（） 這裏完成遞歸是我的代碼想用，但我想不出如何建立遞歸：

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/

組織編寫了時間

我找到了正確的答案錯誤，但它是小的。如果我有這樣的代碼：

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

Answer 2

這應該這樣做。但是這也會刪除圖片。您需要添加條件才能刪除圖像。

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 3

你可以試試這個，不遞歸，使用每個，檢查非包含標記文字也一樣，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(); 
    }); 
}); 

您可以輸入，iframe或含標籤的任何其他非文本改變$(this).has('img').length ==0像$(this).has('img, input, iframe').length ==0

Answer 4

您可以使用過濾功能來獲取所需的元素，而不是試圖找到你不需要的東西。然後克隆，並將它們添加到您的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 5

這是解決你的問題

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

Answer 6

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

的一個非常快速和骯髒的方式，如果你想刪除的斷裂，在每條語句前加上：

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