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>

Answer 1

You need unwrap

$('img').unwrap();

Answer 2

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

see example http://jsfiddle.net/vikastyagi87/Xaa39/6/

Answer 3

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.

Answer 4

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;