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

Answer 4

完全删除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

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

或者：

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

或者，更简洁：

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

甚至使用纯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

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

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

参考文献：

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

Answer 5

您必须同时使用find（），contents（）和unwrap（）来jQuery删除锚标记链接。

jQuery('.myDiv').find('a').contents().unwrap();

Answer 6

我遇到了同样的问题 - 从文本中删除'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>

所以这是另一个解决方案，它不会尝试两次找到该元素并且可以正确地使用多个元素：

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

Answer 7

假设链接文字：

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

使用以下代码删除链接（href），但保持在 link-style 类上定义样式：

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

使用jQuery删除锚标签

7 个答案: