How to remove only tag using jQuery?

Question

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

Hi I want to remove the span using jQuery, I have tried the .unwrap(); but its not working.

please do needful.

Answer 1

.remove() 

http://api.jquery.com/remove/

:)

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);

Kind Regards

--Andy

Answer 3

Unwrap should work. It's possible you're not successfully selecting the span which you wish to unwrap. You can try the following code which should select that span successfully:

$("li a span").unwrap()

It's a bit unclear from your question what exactly you're trying to do. It's also unclear whether you're having trouble with the selectors or with the jquery api. To get a better handle on jquery's selectors I recommend you install firebug and firequery, as it can really help you understand what you're selecting.

Answer 4

$("span").each(function() {
    var content = $(this).text();
    $(this).remove();
    $("a").html(content);
});

Answer 5

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();