How to remove an element but not the content inside it?

Question

How can I remove an element but not the content inside that element?

<a href="#">
    <span>
        <img src="pic-1.jpg"/>
    </span>
</a>

I want to remove the span that wraps the image.

So I can get,

<a href="#">

    <img src="pic-1.jpg"/>

</a>

Possible duplicate of [Remove a HTML tag but keep the innerHtml](http://stackoverflow.com/questions/4232961/remove-a-html-tag-but-keep-the-innerhtml) — Dzyann, Mar 01 '17 at 13:18

score 42 · Accepted Answer · answered Mar 17 '12 at 18:32

42

You need unwrap

$('img').unwrap();

answered Mar 17 '12 at 18:32

dfsq

1

Ooh, nice function. +1 for actually searching instead of doing what I did. – Elliot Bonneville Mar 17 '12 at 18:34
I know this is Q&A is old, but what about unwrapping text? It's possible to unwrap an element but how about plain text? – Kristofer Gisslén Aug 21 '14 at 10:23
@dfsq So simple and yet so clever. :) – Kristofer Gisslén Aug 21 '14 at 11:14

thecodedeveloper.com · Answer 2 · 2012-03-17T18:55:40.660

10

$(document).ready(function(){
  $span = $('span');
  $span.replaceWith($span.html());
});

edited Mar 17 '12 at 18:55

answered Mar 17 '12 at 18:40

I think this is the most complete answer because it also works for unwrapping text (not only DOM elements) – viery365 Mar 29 '17 at 02:25

score 4 · Answer 3 · answered Mar 17 '12 at 18:32

4

The jQuery function unwrap() is what you're looking for:

Remove the parents of the set of matched elements from the DOM, leaving the matched elements in their place.

Check out the API doc page for more information.

answered Mar 17 '12 at 18:32

Michelle Tilley

score 1 · Answer 4 · answered Mar 17 '12 at 18:34

1

You'll have to modify your HTML architecture a bit here:

<a href="#" id="my_href">
    <span id="my_span">
        <img src="pic-1.jpg"/>
    </span>
</a>

jQuery solution:

$("#my_href").html($("#my_span").html());

Non jQuery solution:

document.getElementById("my_href").innerHTML = document.getElementById("my_span").innerHTML;

answered Mar 17 '12 at 18:34

Elliot Bonneville

3

Using HTML like this is generally a bad practice. You're destroying and recreating nodes instead of simply relocating the ones to keep, and removing the ones to discard. It'll also destroy any handlers or other data associated with the `img` element. – Mar 17 '12 at 18:40
2

Ah, really? Okay, I'll avoid that in the future then. :) – Elliot Bonneville Mar 17 '12 at 18:41
That is **NOT** jQuery solution! – gdoron Mar 17 '12 at 18:46
@gdoron Could you be a little more explicit please? Thanks. – Elliot Bonneville Mar 17 '12 at 18:47
All was said by @amnotiam. Just use `unwrap` Now that's a jQuery solution! **simple-clean-effective => jQuery solution.** – gdoron Mar 17 '12 at 18:50
Ah, I see what you're saying. Yeah, I'd actually never heard of `unwrap`. I just rolled my own solution. – Elliot Bonneville Mar 17 '12 at 18:50

4 Answers4