IE 8：删除节点保留孩子 [英] IE 8: remove node keep children

问题描述

我正在尝试使用javascript从dom树中删除一个节点，同时保持它的孩子。我测试了3种方法，如下所示，它们在Firefox中工作正常，但不在IE 8中（见下面的示例）。

I am trying to remove a node from the dom tree using javascript while keeping it's children. I tested the 3 approaches shown below and they work fine in Firefox but do not in IE 8 (see example below).

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忽略/删除嵌套的孩子。

As you can see IE ignores/removes nested children.

感谢任何帮助：）

推荐答案

应该很容易像这样：

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

查看操作 。

这篇关于IE 8：删除节点保留孩子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！