使用Jquery从html字符串中删除标记

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

我试图使用Jquery从HTML字符串中删除span类。我的HTML字符串如下所示:

<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:

要从此字符串中删除span标记,我将执行以下操作:

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?

我哪里错了?还可以更改此字符串中段落标记的字体颜色吗?

4 个解决方案

#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.

这使得一个新元素具有htmlstring的内容。然后,find部分使用选择器查找所有直接和间接子节点并将其删除。最后,新的html字符串是我们之前创建的临时对象的内容。

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

使用.find(),您还可以更改字体颜色:

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

#2

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

这是一个可能的解决方案,它解释了如何删除div中的span。

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

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

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

#3

use

$( "span" ).remove();

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

演示:http://jsfiddle.net/ryxbpn2s/2/

#4

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.

1)你想从span#userAvatar中删除一个类:你应该使用jQuerys removeClass函数。

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.

2)你想要删除跨度但保留内容:你可以用内部的东西替换整个跨度。

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.

3)你想要删除span类及其中的所有内容:你应该使用jQuery的remove()函数。

Usage:

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

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

要更改段落的颜色,可以使用jQuery的find()函数。

Usage:

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

Hope this helps.

希望这可以帮助。