Удалять метки привязки с помощью jQuery

Мой html:

<div class="example">
   <a id="link" href="#" onclick="location.href='http://www.google.com'; return false;">Example</a>
</div>

JQuery

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

Что бы я хотел сделать, это сделать html похожим на это после удаления тега <a>:

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

Как удалить только

<a> </a>

часть?

Ответы

Ответ 1

Альтернативное решение:

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

Ответ 2

.contents() получает дочерние элементы, включая текстовые узлы.

.unwrap() удаляет родительский элемент, сохраняя выбранные узлы.

Эти функции доступны с версии jQuery 1.4, выпущенной в 2010 году:

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

Ответ 3

Попробуйте следующее:

Чтобы удалить a, но сохраните его текст, попробуйте:

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

или

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

Ответ 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 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>

Ответ 5

Я встретил ту же проблему - удалить теги "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());
});

Ответ 6

Предположим, что связанный текст:

<a href="#" onclick="location.href='http://stackoverflow.com/'; return false;" class="link-style">MY link</a>

Используйте приведенный ниже код, чтобы просто удалить ссылку (href), но сохраните стиль, определенный в классе link-style:

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