24

How to remove span tag from string using jquery? I have multiple span tag in string variable

     <p>No Change<span style="color: #222222;">&nbsp;</span>
I love cricket<span style="color: #222222;">Cricket cricket&nbsp;</span></p>
Pratik Gadoya
  • 1,420
  • 1
  • 16
  • 27
Ali
  • 3,545
  • 11
  • 44
  • 63

3 Answers3

46

If this is definitely just stored as a string you can do the following...

var element = $(myString);//convert string to JQuery element
element.find("span").remove();//remove span elements
var newString = element.html();//get back new string

if in fact this is already rendered html in your page then just do...

$("span").remove();//remove span elements (all spans on page as this code stands)

If you want to keep the contents of the span tag you can try this...

var element = $(myString);//convert string to JQuery element
element.find("span").each(function(index) {
    var text = $(this).text();//get span content
    $(this).replaceWith(text);//replace all span with just content
});
var newString = element.html();//get back new string

Here is a working example (you will see two alerts: string at start, string at end)

You can also just do this which might get the result you need:

var justText = $(myString).text();
musefan
  • 47,875
  • 21
  • 135
  • 185
  • I only want to remove span tag not its contents(text). Result of above string should be like "No Change   I love cricket Cricket cricket " – Ali Feb 01 '12 at 10:46
  • @kashifilyaz: See my edit, I am just going to test this with a JSFiddle and will update with results – musefan Feb 01 '12 at 10:52
  • http://jsfiddle.net/kashifilyaz/GEFWG/ could you please check this,why alert show nothing.I used your demo just replace html. – Ali Feb 01 '12 at 11:41
  • In your working example,In 2nd alert

    tag is not shown and one other thing if more then two p tags in inside div then 2nd alerts shows only 1st p tag.could you please check this

     – Ali Feb 01 '12 at 12:13
  • Your second example will strip
    tags out of the span.     – Doug Jun 03 '13 at 00:12
2

This way you can keep inner text of the span by using .contents() jquery method (example of my code below):

$('#navc-22 > a > span').contents().unwrap();
estinamir
  • 435
  • 5
  • 11
0

You could try something like this;

var theString = '<p>No Change<span style="color: #222222;">&nbsp;</span>I love cricket<span style="color: #222222;">Cricket cricket&nbsp;</span></p>';
$(theString).wrap('<div />').find('span').remove();

...or would you like to keep it´s inner HTML?

Stefan
  • 5,644
  • 4
  • 24
  • 31