删除元素内的文本，只留下子元素答案

【问题标题】：Remove text within element leaving child element alone删除元素内的文本，只留下子元素
【发布时间】：2018-05-12 10:31:06
【问题描述】：

我有一个段落标签，其中包含一些文本和一个锚点。我将如何只删除文本而不是锚链接？我查看了 .innerHTML，但我不能弄乱锚链接，因为它的 href 值是动态生成的。

<p>Text to be removed <a href="blahrdyblahr">Link Text</a></p>

【问题讨论】：

How to remove text (without removing inner elements) from a parent element using jquery的可能重复

标签： javascript jquery

【解决方案1】：

children() 返回元素的所有非文本节点的直接后代。

$('p').html(function(){
  return $(this).children();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Text to be removed <a href="blahrdyblahr">Link Text</a></p>
<p><a href="blahrdyblahr">Link Text</a> Text to be removed</p>

【讨论】：

【解决方案2】：

从 textNode 本身（即第一个子节点）中删除文本。

document.querySelector('p').firstChild.textContent = '';

&lt;p&gt;Text to be removed &lt;a href="blahrdyblahr"&gt;Link Text&lt;/a&gt;&lt;/p&gt;

【讨论】：

【解决方案3】：

遍历标签的子节点并删除文本节点：

const container = document.querySelector('p');

for (let i = 0; i < container.childNodes.length; ++i) {
  if (container.childNodes[i].nodeType === Node.TEXT_NODE) {
    container.removeChild(container.childNodes[i]);
  }
}

&lt;p&gt;Text to be removed &lt;a href="blahrdyblahr"&gt;Link Text&lt;/a&gt;&lt;/p&gt;

【讨论】：

【解决方案4】：

只是给另一个选择（并尝试从误解问题的罪恶感中解脱出来）

$('p').contents().not($('p').children()).remove()

这将删除文本和评论节点。

.contents() 返回所有子节点，包括文本和评论节点，所以我们使用.not() 函数排除.children()，因为子节点不包含文本节点，只留下文本和评论节点被删除.

这是小提琴：https://jsfiddle.net/aL7cmmjd/

请看这里：https://api.jquery.com/contents/

【讨论】：