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> 

部？

Answer 1

代替ソリューション：

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

Answer 2

これを試して：

aテキストを削除して保持するには、次のことを試してください。

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

また

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

Answer 3

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フィドルデモ。

参照をキャッシュしたり、特定のノードの固有のプロパティを使用したりするのではなく、同じ要素を2回選択するため、このアプローチは「ずさんな」ものです。

または：

// 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：
  • 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()。

Answer 4

jQuery でアンカー タグ リンクを削除するには、find()、contents()、および unwrap() を一緒に使用する必要があります。

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

Answer 5

テキストから「a」タグを削除するという同じ問題に遭遇しました。他のソリューションが効率を気にするかどうかはわかりません-それらはすべて要素検索を2回行います。'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>

したがって、これは要素を2回見つけようとせず、複数の要素で正しく機能する別のまだ解決策です:

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

Answer 6

リンクされたテキストがあるとします:

<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");
});