javascript - IE 8: remove node keep children - Stack Overflow

admin管理员组

文章数量:1332373

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

Example input node:

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

what it should result in:

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

What IE 8 does:

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

As you can see IE ignores/removes nested children.

I'd appreciate any help :)

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

Example input node:

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

what it should result in:

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

What IE 8 does:

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

As you can see IE ignores/removes nested children.

I'd appreciate any help :)

• javascript
• jquery
• dom
• internet-explorer-8

Share Improve this question Follow asked Sep 24, 2012 at 8:47 sotixsotix 82222 gold badges88 silver badges2424 bronze badges 2

• What's the problem with this approach http://jsfiddle/NKpMC/ . Its working fine here – Jashwant Commented Sep 24, 2012 at 8:59
• You are right. I spotted another error in my code which prevented it from working. Thanks for your help :) – sotix Commented Sep 24, 2012 at 9:44

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

It should be easy to do like this:

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

See it in action.

Use unwrap(), that's what it's intended for.

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

Next is most simplest and fastest native javascript code:

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

http://jsfiddle/N3J7K/

@Jon's approach, sans iteration:

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

See it in action.

---

@Dr.Molle's answer should be the accepted one.

本文标签： javascriptIE 8 remove node keep childrenStack Overflow