Question

我想像这样添加HTML：

<div><img src="item.png"/>&nbsp;<a href="#"><span>Hello</span></a></div>

但在某些情况下我需要摆脱包装a元素，所以看起来像这样：

<div><img src="item.png"/>&nbsp;<span>Hello</span></div>

这个a元素可以是任意HTML片段中的任何位置。我用[href =“＃”]抓住它。这个HTML不是DOM的一部分，它在删除a元素后被添加到DOM中。

我去了jQuery为此提供的所有东西，但没有成功。我的主要问题是，似乎没有办法将选择器应用于jQuery创建的HTML，如下所示：

$("html code from above");

我试图用它的内部HTML替换它的a元素，但是我的所有构造都用 find（）和replaceWith（）失败，大多只剩下<span>Hello</span> :(

jQuery-pro如何解决这个问题？

Answer 1

unwrap 功能不会做你想要的吗？

如果您只想删除周围的标记（如锚点）

Answer 2

您需要做的是设置选择器的上下文。请参阅此参考：http://api.jquery.com/jquery/#selector-context

在您的情况下，当您选择替换链接时，请将上下文设置为您要修改的HTML片段。这是一个例子：

$(function() {
    //create snippet
    var mySnippet = $('<div><img src="item.png"/>&nbsp;<a href="#"><span>Hello</span></a></div>');

    //remove the link, using the snippet as the context
    $('a[href="#"]', mySnippet).replaceWith($('a[href="#"]', mySnippet).html());

    //insert the modified snippet
    $('body').append(mySnippet);
});

这是一个实际的演示（不是非常令人兴奋，但表明它有效）：http://jsfiddle.net/Ender/dQ32B/

jQuery：删除HTML元素同时保留它的子元素

2 个答案: