How to remove only the parent element and not its child elements in JavaScript?

Question

Let's say:

<div>   pre text   <div class="remove-just-this">     <p>child foo</p>     <p>child bar</p>     nested text   </div>   post text </div> 

to this:

<div>   pre text   <p>child foo</p>   <p>child bar</p>   nested text   post text </div> 

I've been figuring out using Mootools, jQuery and even (raw) JavaScript, but couldn't get the idea how to do this.

Answer 1

Using jQuery you can do this:

var cnt = $(".remove-just-this").contents(); $(".remove-just-this").replaceWith(cnt); 

Quick links to the documentation:

• contents( ) : jQuery
• replaceWith( content : [String | Element | jQuery] ) : jQuery

Answer 2

The library-independent method is to insert all child nodes of the element to be removed before itself (which implicitly removes them from their old position), before you remove it:

while (nodeToBeRemoved.firstChild) {     nodeToBeRemoved.parentNode.insertBefore(nodeToBeRemoved.firstChild,                                             nodeToBeRemoved); }  nodeToBeRemoved.parentNode.removeChild(nodeToBeRemoved); 

This will move all child nodes to the correct place in the right order.