使用jQuery删除锚标签

Question

我的HTML:

<div class="example">
   <a id="link" href="http://www.google.com">Example</a>
</div>

jQuery的

$('a#link').remove();

我想做的<a>是,删除标记后使html看起来像这样:

<div class="example">
  Example
</div>

我该如何删除

<a> </a> 

部分？

Answer 1

替代解决方案:

$("a#link").replaceWith($("a#link").text());

Answer 2

.contents()让孩子们包括文本节点.

.unwrap() 在保留所选节点的同时删除父元素.

自2010年发布的jQuery 1.4以来,这些功能已经可用:

$('#link').contents().unwrap();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<div class="example">
   <a id="link" href="http://www.google.com">Example</a>
</div>

如果您的选择中有多个节点,它也会起作用:

$('a').contents().unwrap();

.one {
  color: red;
}
.two {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<div class="one">
  <a href="#">Foo</a>
</div>
<div class="two">
  <a href="#">Bar</a>
</div>

Answer 3

试试这个:

要删除a但保留其文本,请尝试:

$('.example').html($('.example a#link').text());

要么

$('.example a#link').replaceWith($('.example a#link').text());