CODEWITHSUNDEEP
jquery
Run
Run

Reputation: 57176

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

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>

Upvotes: 17

Views: 18358

Answers (4)

thecodedeveloper.com
thecodedeveloper.com

Reputation: 3240

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

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

Upvotes: 10

Elliot Bonneville
Elliot Bonneville

Reputation: 53301

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;

Upvotes: 1

Michelle Tilley
Michelle Tilley

Reputation: 159105

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.

Upvotes: 4

dfsq
dfsq

Reputation: 193261

You need unwrap

$('img').unwrap();

Upvotes: 42

Related Questions