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

मैं पता लगा, यह या तो जावास्क्रिप्ट या 'अपनी विधि .children साथ 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(); 

इस कोड टूट गया है, इसे हटा देता है और छोड़ देता है खाली फैला ... कैसे एक मैं प्रत्यावर्तन के साथ अपने परिणाम हासिल?

संपादित

यहाँ मेरी jsfiddle है: http://jsfiddle.net/EGVQH/

संपादित 2 समय

मैं सही जवाब में एक बग मिला है, लेकिन यह छोटा है।

<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> पर गलत परिणाम दे रहा था: मैं में यह परिणाम के लिए मान

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

: अगर मैं इस तरह कोड है। कुछ जवाब परीक्षण के बाद गलत थे। 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

यह करना चाहिए:

मेरी JSfiddle देखें। लेकिन यह छवि को भी हटा देगा। छवि को हटाने के लिए आपको शर्त जोड़ने की आवश्यकता है।

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