Question

我正在尝试使用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>

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

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

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

Answer 1

对于您的第一个问题，您应该能够执行以下操作：

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

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

使用.find（），您还可以更改字体颜色：

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

Answer 2

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

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

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

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

Answer 3

使用

$( "span" ).remove();

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

Answer 4

我不确定你想要达到的目标，所以我会发布一些解决方案，其中一个可以解决你的问题。

1）您想要从span＃userAvatar中删除一个类：你应该使用jQuerys removeClass函数。

用法：

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

2）您想删除范围但保留内容：您可以用内部的内容替换整个范围。

用法：

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

3）您想要删除span类及其中的所有内容：你应该使用jQuery的remove（）函数。

用法：

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

要更改段落的颜色，可以使用jQuery的find（）函数。

用法：

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

希望这有帮助。

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

4 个答案: