使用 jQuery 删除锚标记

Remove anchor tags using jQuery

提问by cusejuice

My html:

我的html：

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

jQuery

jQuery

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

What I would like to do, is make the html look like this after the <a>tag is removed:

我想做的是在<a>删除标签后使 html 看起来像这样：

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

How do I remove just the

我如何只删除

<a> </a> 

part?

部分？

回答by Elliot Bonneville

Alternate solution:

替代解决方案：

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

回答by zzzzBov

.contents()gets the children includingtext nodes.

.contents()获取子节点，包括文本节点。

.unwrap()removes parent element while keeping the selected nodes.

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

These functions have been available since jQuery 1.4 which was released in 2010:

这些函数自 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>

It'll also work if you have multiple nodes in your selection:

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

$('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>

回答by thecodeparadox

Try this:

尝试这个：

To remove abut retain its text try:

要删除a但保留其文本，请尝试：

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

or

或者

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

回答by David says reinstate Monica

To remove the aelement entirely:

要a完全删除元素：

// this approach is sloppy, but essentially it
// selects the element whose id is equal to 'link',
// finds the parent, and sets that parent's text
// to the text of the '#link' element:
$('#link').parent().text($('#link').text());

$('#link').parent().text($('#link').text());

a::after {
  content: ' (a element).';
}

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

JS Fiddle demo.

JS小提琴演示。

The approach is 'sloppy' because we select the same element twice, rather than caching a reference or using the inherent properties of a a given node.

这种方法是“草率的”，因为我们选择了两次相同的元素，而不是缓存引用或使用给定节点的固有属性。

Or:

或者：

// here we again find the parent of the given '#link'
// element, and update its text using the anonymous 
// function of the text() method:
$('#link').parent().text(function(i, text) {
  // i:    the first argument, is the index of the
  //       current element amongst the jQuery
  //       collection returned by the selector,
  // text: the second argument, is the existing
  //       text of the node prior to modification
  //       within the function.

  // here we simply return the same text, which
  // replaces the existing innerHTML of the
  // node with only the text:
  return text;
});

$('#link').parent().text(function(i, text) {
  return text;
});

a::after {
  content: ' (a element).';
}

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

JS Fiddle demo.

JS小提琴演示。

Or, rather more concisely:

或者，更简洁地说：

// here we find the element, access its contents
// (its childNodes) and unwrap those contents,
// with the unwrap() method, to remove the parent
// element of the contents and replace that parent
// with its contents:
$('#link').contents().unwrap();

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

a::after {
  content: ' (a element).';
}

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

JS Fiddle demo.

JS小提琴演示。

Or even with plain JavaScript:

或者甚至使用纯 JavaScript：

function removeAndRetain(node) {

  // caching references to the passed-in node,
  // and that node's parentNode:
  var el = node,
    parent = el.parentNode;

  // while the passed-in node has a firstChild:
  while (el.firstChild) {

    // we insert that firstChild before the
    // passed-in node, using parent.insertBefore():
    parent.insertBefore(el.firstChild, el);
  }

  // here we explicitly remove the passed-in node
  // from the document, using Node.removeChild():
  parent.removeChild(el);
}

removeAndRetain(document.getElementById('link'));

function removeAndRetain(node) {
  var el = node,
    parent = el.parentNode;

  while (el.firstChild) {
    parent.insertBefore(el.firstChild, el);
  }
  parent.removeChild(el);
}

removeAndRetain(document.getElementById('link'));

a::after {
  content: ' (a element).';
}

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

JS Fiddle demo.

JS小提琴演示。

And, to improve the above approach, allowing it to take and work with multiple nodes:

并且，为了改进上述方法，允许它采用和使用多个节点：

function removeAndRetain(node) {

  // if Array.from() exists, we use that otherwise we
  // use an alternative method to convert the supplied node,
  // NodeList, HTMLCollection... into an Array:
  var nodes = Array.from ? Array.from(node) : Array.prototype.slice.call(node, 0),

  // initialising a variable for use in the
  // (later) loop:
    parent;


  // using Array.prototype.forEach() to iterative over
  // the Array of nodes:
  nodes.forEach(function(n) {
    // n: the first argument, is a reference to the 
    // current element of the Array over which
    // we're iterating.

    // assigning the current-node's parent to
    // parent variable:
    parent = n.parentNode;

    // as above, here we move the firstChild from
    // the current-node to become its previous
    // sibling:
    while (n.firstChild) {
      parent.insertBefore(n.firstChild, n);
    }

    // removing the current-node from the document:
    parent.removeChild(n);

    // normalizing the parent, so that adjacent
    // textNodes are merged together:
    parent.normalize();
  });
}

removeAndRetain(document.querySelectorAll('.example a'));

function removeAndRetain(node) {
  var nodes = Array.from ? Array.from(node) : Array.prototype.slice.call(node, 0),
    parent;

  nodes.forEach(function(n) {
    parent = n.parentNode;

    while (n.firstChild) {
      parent.insertBefore(n.firstChild, n);
    }
    parent.removeChild(n);
    parent.normalize();
  });
}

removeAndRetain(document.querySelectorAll('.example a'));

a::after {
  content: ' (a element).';
}

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

JS Fiddle demo.

JS小提琴演示。

References:

参考：

• JavaScript:
  • Array.from().
  • Array.prototype.forEach().
  • Array.prototype.slice().
  • Function.prototype.call().
  • Node.insertBefore().
  • node.normalize().
  • Node.parentNode.
  • Node.removeChild().
  • while (...)statement.
• jQuery:
  • contents().
  • parent().
  • text().
  • unwrap().

• JavaScript：
  • Array.from().
  • Array.prototype.forEach().
  • Array.prototype.slice().
  • Function.prototype.call().
  • Node.insertBefore().
  • node.normalize().
  • Node.parentNode.
  • Node.removeChild().
  • while (...)声明。
• jQuery：
  • contents().
  • parent().
  • text().
  • unwrap().

回答by Rom098

I met the same problem - to remove 'a' tags from text. I'm not sure if other solutions care about efficiency - all of them do the element searching twice. Moreover, the accepted solution doesn't work properly in case there are multiple 'a#link'elements, e.g.:

我遇到了同样的问题 - 从文本中删除 'a' 标签。我不确定其他解决方案是否关心效率 - 所有这些解决方案都进行了两次元素搜索。此外，如果存在多个'a#link'元素，则已接受的解决方案将无法正常工作，例如：

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

So this is another yet solution which doesn't try to find the element twice and works correctly with multiple elements:

所以这是另一个解决方案，它不会尝试两次查找元素并且可以正确处理多个元素：

$('a#link').each(function () {
    $(this).replaceWith($(this).text());
});

回答by Ajitesh Deb

Suppose a linked text:

假设一个链接文本：

<a href="http://stackoverflow.com/" class="link-style">MY link</a>

<a href="http://stackoverflow.com/" class="link-style">MY link</a>

Use below code to just remove the link (href), but keep the styling defined on link-styleclass:

使用下面的代码只删除链接（href），但保留链接样式类上定义的样式：

jQuery(".post-meta").find('a').each(function () {
    var obj = jQuery(this);
    obj.removeAttr("href");
});