remove wrapping div and leave all sub-divs intact?

Question

I have one wrapper div with several sub-divs inside and tags inside those sub-divs as well. I want to remove the wrapper div. I have considered JQuery\'s unwrap, but it ap

Answer 1

The unwrap method will work fine (you can select any of/any number of the siblings):

$("#innerDiv1").unwrap();

From the docs (emphasis added):

The matched elements (and their siblings, if any) replace their parents within the DOM structure.

Answer 2

function unwrap(el){
    var parent = el.parentNode; // get the element's parent node
    while (el.firstChild){
        parent.insertBefore(el.firstChild, el); // move all children out of the element
    }
    parent.removeChild(el); // remove the empty element
}

The code is straight forward and much faster than the corresponding jQuery's method $.unwrap().

Source: https://plainjs.com/javascript/manipulation/unwrap-a-dom-element-35/

Answer 3

To add on to @james

You can do something like this

var innerDivs = $("#wrapper").html();
$("#wrapper").remove();
$("body").append(innerDivs);​ // you will need to change this to append to whatever element you like

jsfiddle example

http://jsfiddle.net/dAZ9D/

Answer 4

Another solution would be to use .replaceWith() in conjunction with .html():

jQuery('#wrapper').each(function () {
    var t = jQuery(this);
    t.replaceWith(t.html());
});