Question

我正在尝试使用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忽略/删除嵌套的子项。

我很感激任何帮助：）

Answer 1

这样做应该很容易：

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

See it in action

Answer 2

使用unwrap()，这就是它的用途。

<span class="A1">
    start text
    <span class="F">
        bold text
    </span>
    end text
</span>
<script>
  jQuery(function($){$('.F').unwrap();});
</script>

Answer 3

@ Jon的方法，没有迭代：

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

<强> See it in action.

@ Dr.Molle的答案应该是被接受的答案。

Answer 4

接下来是最简单，最快速的原生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/

IE 8：删除节点保留子节点

4 个答案: