jquery - 使用 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>

部分？

score 19 · Accepted Answer

19

替代解决方案：

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

于 2012-05-07T20:13:25.960 回答

score 13 · Accepted Answer

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

score 5 · Accepted Answer

试试这个：

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

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

或者

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

score 2 · Accepted Answer

要完全删除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 小提琴演示。

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

或者：

// 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 小提琴演示。

或者，更简洁地说：

// 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 小提琴演示。

甚至使用纯 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 小提琴演示。

并且，为了改进上述方法，允许它采用多个节点并与之一起工作：

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 小提琴演示。

参考：

JavaScript：
jQuery：
- contents().
- parent().
- text().
- unwrap().

score 0 · Accepted Answer

您必须一起使用 find()、contents() 和 unwrap() 来 jQuery 删除锚标记链接。

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

score -1 · Accepted Answer

我遇到了同样的问题 - 从文本中删除“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());
});

score -1 · Accepted Answer

假设一个链接文本：

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

使用以下代码仅删除链接（href），但保留链接样式类中定义的样式：

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

jquery - 使用 jQuery 删除锚标记

7 回答 7

Related

Reference