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 に答える