How can I remove wrapper (parent element) without removing the child?

Question

I would like to remove the parent without removing the child - is this possible?

HTML structure:

<div class="wrapper">
  <img src"">
</div>
<div class="button">Remove wrapper</div>

After clicking on the button I would like to have:

<img src"">
<div class="button">Remove wrapper</div>

You may lose the event listeners attached to the children, but yes, you can do that. — Joe Simmons, Oct 09 '13 at 01:20

score 59 · Answer 1 · edited Sep 19 '21 at 07:40

59

Pure JS (ES2015) solution, in my opinion easier to read than jQuery-solutions.

node.replaceWith(...node.childNodes)

Node has to be an ElementNode

const wrapperNode = document.querySelector('h1')
wrapperNode.replaceWith(...wrapperNode.childNodes)

<h1>
  <a>1</a>
  <b>2</b>
  <em>3</em>
</h1>

edited Sep 19 '21 at 07:40

vsync

118,978
58
307
400

answered Feb 01 '18 at 23:51

Tom Oeser

632
1
5
8

4

With typescript: ```const unwrap = (node: Element) => { node.replaceWith(...Array.from(node.children)); };``` – Shnigi Jul 08 '21 at 11:10
Keeps child event listeners and simple solution. – di3 Mar 01 '22 at 22:09

Web_Designer · Answer 2 · 2015-10-28T22:58:28.613

34

Pure JS solution that doesn't use innerHTML:

function unwrap(wrapper) {
    // place childNodes in document fragment
    var docFrag = document.createDocumentFragment();
    while (wrapper.firstChild) {
        var child = wrapper.removeChild(wrapper.firstChild);
        docFrag.appendChild(child);
    }

    // replace wrapper with document fragment
    wrapper.parentNode.replaceChild(docFrag, wrapper);
}

Try it:

unwrap(document.querySelector('.wrapper'));

edited Oct 28 '15 at 22:58

answered Oct 28 '15 at 21:29

Web_Designer

72,308
93
206
262

1

why is avoiding innerHTML preferable? – ajbeaven Sep 01 '16 at 03:43
12

@ajbeaven Keeping the existing DOM objects (rather than recreating them using innerHTML) means any event listeners attached to them are maintained. – HeyHeyJC Sep 12 '16 at 21:45
2

Nice solution, but there is no need to remove the children from the wrapper since `docFrag.appendChild(wrapper.firstChild);` will automatically move a node from its current position to its new position. [Read more about appendChild on MDN](https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild) – Robbendebiene Jul 17 '18 at 12:44

score 19 · Answer 3 · answered Sep 30 '14 at 17:51

19

Surprised that nobody's posting the simplest answer:

// Find your wrapper HTMLElement
var wrapper = document.querySelector('.wrapper');

// Replace the whole wrapper with its own contents
wrapper.outerHTML = wrapper.innerHTML;

answered Sep 30 '14 at 17:51

ChaseMoskal

7,151
5
37
50

4

interesting even if you loose listener – bormat Dec 20 '16 at 22:31

Tats_innit · Accepted Answer · 2013-10-09T01:07:02.047

11

Could use this API: http://api.jquery.com/unwrap/

Demo http://jsfiddle.net/7GrbM/

.unwrap

Code will look something on these lines:

Sample Code

$('.button').click(function(){
    $('.wrapper img').unwrap();
});

edited Oct 09 '13 at 01:07

answered Oct 09 '13 at 01:01

Tats_innit

33,991
10
71
77

1

should it be $('.wrapper img').unwrap() ? – Kai Oct 09 '13 at 01:03
2

+1 and if there are more contents then `$('.wrapper').children().unwrap();` – PSL Oct 09 '13 at 02:01
1

Merci Yo! `:)` your +1 is gracefully accepted, cheers for more stuff for OP. – Tats_innit Oct 09 '13 at 02:06
+1 and if (sometimes) there's only text content (i.e. no child elements), then `$('.wrapper').contents().unwrap();` – Andrew Cheong Aug 17 '19 at 10:22

Jay Harris · Answer 5 · 2013-10-09T01:34:47.060

6

Pure javascript solution, i'm sure someone can simplify it more but this is an alternative for pure javascript guys.

HTML

<div class="button" onclick="unwrap(this)">Remove wrapper</div>

Javascript (pure)

function unwrap(i) {
    var wrapper = i.parentNode.getElementsByClassName('wrapper')[0];
    // return if wrapper already been unwrapped
    if (typeof wrapper === 'undefined') return false;
    // remmove the wrapper from img
    i.parentNode.innerHTML = wrapper.innerHTML + i.outerHTML;
    return true;
}

JSFIDDLE

edited Oct 09 '13 at 01:34

answered Oct 09 '13 at 01:11

Jay Harris

4,201
17
21

1

check you working [fiddle](http://jsfiddle.net/7GrbM/2/) some problem after unwrapping. Fix it . – Tushar Gupta - curioustushar Oct 09 '13 at 01:26
Using `innerHTML` is evil, it will delete all your events inside the HTML. – dude Apr 22 '16 at 16:07
@julmot clearly... (: if you want a solution that does that, scroll up or down and you'll find it. I'm not here to create duplicate answers especially when the question didn't ask to keep the event handlers. (; – Jay Harris Apr 22 '16 at 21:01

score 1 · Answer 6 · answered Dec 02 '15 at 13:15

1

if you're using jQuery:

$(".wrapper").replaceWith($(".wrapper").html());

answered Dec 02 '15 at 13:15

szaman

2,159
1
14
30

score -2 · Answer 7 · edited Apr 25 '16 at 12:37

-2

If the wrapper element contains text, the text remains with child nodes.

edited Apr 25 '16 at 12:37

Jonathan Argentiero

5,687
8
29
34

answered Apr 25 '16 at 12:13

Filipe Torres

7
3

How can I remove wrapper (parent element) without removing the child?

7 Answers7

Try it:

Linked

Related