Deleting a tag from a html string using Jquery

Question

I am trying to delete a span class from a HTML string using Jquery. My HTML string looks like this:

<li class="left clearfix"><span id="userAvatar" class="chat-img pull-left"><img src="http://placehold.it/50/55C1E7/fff&amp;text=U" alt="User Avatar" class="img-circle"></span><div class="chat-body clearfix"><div class="header"><strong class="primary-font">sdfsdf3424</strong></div><p>dfgfg</p></div></li>

To delete the span tag from this string I am doing the following:

var JqueryObj = $('<div/>').html(stringHTML).contents();
JqueryObj = JqueryObj.not("#userAvatar");   
stringHTML = JqueryObj.html();

Where am I going wrong? Also is it possible to change the font color of the paragraph tag inside this string?

If you want to remove the span tag you can use $('#userAvatar').remove() — jasonwarford
– jasonwarford, Commented Apr 16, 2015 at 23:15
you want to remove a class?? ($("#userAvatar").removeClass("classname")) -- edit your question as you have (I am trying to delete a span class) and then (To delete the span tag from this string I am doing the following). whats that 2 questions?? — Tasos
– Tasos, Commented Apr 16, 2015 at 23:22

firefoxuser_1 · Accepted Answer · 2015-04-16 23:16:57Z

1

For your first question, you should just be able to do the following:

var htmlstring = '<li class="left clearfix"><span id="userAvatar" class="chat-img pull-left"><img src="http://placehold.it/50/55C1E7/fff&amp;text=U" alt="User Avatar" class="img-circle"></span><div class="chat-body clearfix"><div class="header"><strong class="primary-font">sdfsdf3424</strong></div><p>dfgfg</p></div></li>'

    var obj = $("div").html(htmlstring);
    obj.find("#userAvatar").remove();

    var newhtmlstring = obj.html();

This makes a new element that has the contents of the htmlstring in it. Then, the find part finds all direct and indirect children with the selector and removes them. finally, the new html string is the contents of the temporary object we created before.

Using .find(), you can also change the font color:

obj.find("p").css("color", "red");

answered Apr 16, 2015 at 23:16

firefoxuser_1

1,84914 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Shelly Over a year ago

why dont you simply use $( "span" ).remove();

Tasos Over a year ago

@Shelly the op is asking to delete a span class. or not?

firefoxuser_1 Over a year ago

I think the idea is to take a string of html (not actually in the page) and remove a span from it

Vim · Accepted Answer · 2015-04-16 23:45:08Z

1

here is a possible solution which explains how to remove span in a div.

var divContent = $("div").html(stringHTML);

divContent = $(divContent).find("#userAvatar").remove();

$("div").empty().html($(divContent).html());

edited Apr 16, 2015 at 23:45

answered Apr 16, 2015 at 23:24

Vim

5596 silver badges16 bronze badges

Comments

Shelly · Accepted Answer · 2015-04-16 23:21:38Z

0

use

$( "span" ).remove();

DEMO : http://jsfiddle.net/ryxbpn2s/2/

answered Apr 16, 2015 at 23:21

Shelly

3531 silver badge7 bronze badges

Comments

dosek125 · Accepted Answer · 2015-04-16 23:23:45Z

I am not exactly sure what you are trying to achieve so I will post a few solutions, maybe one of them will solve your problem.

1) You want to remove the a class from span#userAvatar: You should use jQuerys removeClass function.

Usage:

$( "#userAvatar" ).removeClass( "className" )

2) You want to remove the span but keep the contents: You can just replace the whole span with what's inside.

Usage:

$("#userAvatar").replaceWith(function() {
 return $("img", this);
});

3) You want to remove the span class and everything that's inside it: You should use jQuery's remove() function.

Usage:

$("#userAvatar").remove();

To change the colour of the paragraph you can use jQuery's find() function.

Usage:

JqueryObj.find("p").css("color", "#EEEEEE");

Hope this helps.

Collectives™ on Stack Overflow

Deleting a tag from a html string using Jquery

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related