remove wrapping div and leave all sub-divs intact?
Solution 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.
Solution 2:
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/
Solution 3:
Another solution would be to use .replaceWith()
in conjunction with .html()
:
jQuery('#wrapper').each(function () {
var t = jQuery(this);
t.replaceWith(t.html());
});
Solution 4:
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/