jquery - remove wrapping div and leave all sub-divs intact?

ID : 274397

viewed : 22

Tags : jqueryjquery





Top 5 Answer for jquery - remove wrapping div and leave all sub-divs intact?

vote vote

95

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.

vote vote

86

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/

vote vote

78

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

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

68

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/

vote vote

50

Top 3 video Explaining jquery - remove wrapping div and leave all sub-divs intact?







Related QUESTION?