Jquery - 仅从 div 中删除文本内容答案

【问题标题】：Jquery - Remove only text content from a divJquery - 仅从 div 中删除文本内容
【发布时间】：2010-08-06 08:11:46
【问题描述】：

是否可以仅从 div 中删除文本内容，即保留所有其他元素不变并且仅删除直接位于 div 内的文本？

【问题讨论】：

标签： jquery

【解决方案1】：

这应该可以解决问题：

$('#YourDivId').contents().filter(function(){
    return this.nodeType === 3;
}).remove();

或者使用 ES6 箭头函数：

$('#YourDivId').contents().filter((_, el) => el.nodeType === 3).remove();

如果你想让你的代码更具可读性并且只需要支持 IE9+，你可以使用node type constants。就个人而言，我也会将过滤器函数拆分出来并命名，以便重用和更好的可读性：

let isTextNode = (_, el) => el.nodeType === Node.TEXT_NODE;

$('#YourDivId').contents().filter(isTextNode).remove();

这是一个包含所有示例的 sn-p：

$('#container1').contents().filter(function() {
  return this.nodeType === Node.TEXT_NODE;
}).remove();

$('#container2').contents().filter((_, el) => el.nodeType === Node.TEXT_NODE).remove();

let isTextNode = (_, el) => el.nodeType === Node.TEXT_NODE;

$('#container3').contents().filter(isTextNode).remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container1">
  <h1>This shouldn't be removed.</h1>
  This text should be removed.
  <p>This shouldn't be removed either.</p>
  This text should also be removed.
</div>

<div id="container2">
  <h1>This shouldn't be removed.</h1>
  This text should be removed.
  <p>This shouldn't be removed either.</p>
  This text should also be removed.
</div>

<div id="container3">
  <h1>This shouldn't be removed.</h1>
  This text should be removed.
  <p>This shouldn't be removed either.</p>
  This text should also be removed.
</div>

【讨论】：

看起来很好的答案，但你能解释一下解决方法吗？什么是节点类型 === 3 ？
@eirenaios developer.mozilla.org/en-US/docs/Web/API/Node/nodeType
小心你如何复制/粘贴，这个解决方案中有一些奇怪的不可见的 Unicode 字符

【解决方案2】：

假设 HTML 结构如下：

<div class="element-to-clean">
  Content to be filtered out.
  <span class="element-to-leave-intact">
    Content to be left inthe element.
  </span>
</div>

您可以使用以下 JavaScript + jQuery 2.1 代码实现您想要的行为：

$('.element-to-clean').html($('.element-to-clean').children());

【讨论】：

【解决方案3】：

你可以用简单的 dom 做到这一点：

var div=$("div")[0];
if(div.childNodes.length)
   for(var i=0;i<div.childNodes.length;i++)
   {
       if(div.childNodes[i].nodeType===3)
           div.removeChild(div.childNodes[i]);
   }

【讨论】：

【解决方案4】：

最简单的方法是这样的：

$('#div').html($('<div>').append($('*', '#div')).html());

【讨论】：

【解决方案5】：

这可能不是最好的方法，但是我将 div 保存在一个变量中，然后在我删除了我使用的标签中的所有内容后追加：

$('.wpcf7 form p').each(function(i){
    var el = $(this).find('span');
    if(i==4)
    el = $(this).find('input');
    $(this).empty();
    $(this).append(el);
});

【讨论】：

【解决方案6】：

$('#yourDiv').text('');

这将删除您的文本内容

【讨论】：

不，它会删除 div 内的所有内容。
我迟到了，但为什么 Krish 得了 -1 而 Gary 得了 +1。