How to remove only tag using jQuery?

Question

I want to remove the span using jQuery, I have tried the .unwrap(); but it's not working.

<div>
<ul>
<li><a href="#"><span>link</span></a></li>
<li><a href="#"><span>link</span></a></li>
</ul>
</div>

Answer 1

Obviously, unwrap doesn't work as the spans only have text nodes inside them and jquery doesn't handle text nodes too well... this works however (you could use also jQuery.text instead of jQuery.html if you're sure that the span only contains text):

$('li a span').replaceWith($('li a span').html());

Working example

Edit: Actually, it seems that unwrap works as well if you use jQuery.contents to work around the jquery's inability to directly select text nodes:

$('li a span').contents().unwrap();

Answer 2

$('li').find('span').remove();

or

$('li').find('span').detach();

If you want to remove the wrapping only, try

var buffer = $('li').find('span').text();
$('li').find('span').parent().html(buffer);