4

子を保持したまま、JavaScriptを使用してDOMツリーからノードを削除しようとしています。以下に示す3つのアプローチをテストしましたが、Firefoxでは正常に機能しますが、IE 8では機能しません（以下の例を参照）。

function removeNodeKeepChildren(node){
    // approach 1
    jQuery(node.parentNode).children().map(function (index) {
        jQuery(this).replaceWith(jQuery(this).contents());
    });

    // approach 2
    // doesn't work with content() either
    jQuery(node.parentNode).html(jQuery(node).html());

    // approach 3
    var childfragment = document.createDocumentFragment();
    for(var i=0; i<node.childNodes.length;i++){
            childfragment.appendChild((node.childNodes[i]).cloneNode());
    }
    node.parentNode.replaceChild(childfragment,node);
}

入力ノードの例：

<span class="A1">
    start text
    <span class="F">
        bold text
    </span>
    end text
</span>

結果は次のようになります。

    start text
    <span class="F">
        bold text
    </span>
    end text

IE 8の機能：

    start text
    <span class="F">
    </span>
    end text

ご覧のとおり、IEはネストされた子を無視/削除します。

助けていただければ幸いです:)

4

4 に答える 4

3

このようにするのは簡単なはずです：

function removeKeepChildren(node) {
    var $node = $(node);
    $node.contents().each(function() {
        $(this).insertBefore($node);
    });
    $node.remove();
}

実際の動作をご覧ください。

于 2012-09-24T08:53:11.327 に答える
3

unwrap（）を使用してください。これが目的です。

<span class="A1">
    start text
    <span class="F">
        bold text
    </span>
    end text
</span>
<script>
  jQuery(function($){$('.F').unwrap();});
</script>
于 2012-09-24T09:00:28.887 に答える
3

次は、最も単純で最速のネイティブJavaScriptコードです。

function removeNodeKeepChildren(node) {
  if (!node.parentElement) return;
  while(node.firstChild)
  {
    node.parentElement.insertBefore(node.firstChild, node);
  }
  node.parentElement.removeChild(node);
}

http://jsfiddle.net/N3J7K/

于 2012-09-24T09:20:19.150 に答える
2

@Jonのアプローチ、反復なし：

function removeKeepChildren(node) {
    var $node = $(node);
    var contents = $node.contents();
    $node.replaceWith(contents);
}

実際の動作をご覧ください。

@Dr.Molleの答えは受け入れられたものでなければなりません。

于 2012-09-24T08:56:16.960 に答える