Question

I have menu structure like below,

    <ul class="sub-menu">
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34" id="menu-item-34"><a href="http://localhost/artofsujata/testimonials/">
<span class="menu_left">&nbsp;</span> 
<span class="menu_center">Testimonials</span> 
<span class="menu_right">&nbsp;</span>
</a>
</li>   
</ul>

i need to remove the tags without lossing data and i need above menu structrue like below,

    <ul class="sub-menu">
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34" id="menu-item-34"><a href="http://localhost/artofsujata/testimonials/">
&nbsp; 
Testimonials
&nbsp;
</a>
</li>   
</ul>

how can i do this using jquery?..

Answer 1

This will do the trick:

$('ul li a').html($('ul li a').text());

With $('ul li a').text() you select all text nodes in your tag. And with $('ul li a').html() you put all selected text nodes in your tag. This results in stripping all tags from there.

For multiple LIs you can use this:

$('ul.sub-menu > li.menu-item > a').each(function(){
  $(this).html($(this).text());
});