Skip to content Skip to sidebar Skip to footer

Ie 8: Remove Node Keep Children

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

Solution 1:

It should be easy to do like this:

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

See it in action.

Solution 2:

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

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

Solution 3:

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.net/N3J7K/

Solution 4:

@Jon's approach, sans iteration:

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

See it in action.


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

Post a Comment for "Ie 8: Remove Node Keep Children"