Jquery - 仅从 div 中删除文本内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3421999/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery - Remove only text content from a div
提问by David
is possible to remove only text content from a div, i.e. leave all other elements intact and only remove text that is directly inside a div?
是否可以仅从 div 中删除文本内容，即保留所有其他元素完整无缺并且仅删除直接位于 div 内的文本？
回答by Mark Bell
This should do the trick:
这应该可以解决问题：
$('#YourDivId').contents().filter(function(){
return this.nodeType === 3;
}).remove();
Or using an ES6 arrow function:
或者使用 ES6 箭头函数：
$('#YourDivId').contents().filter((_, el) => el.nodeType === 3).remove();
If you want to make your code more readable and you only need to support IE9+, you can use the node type constants. Personally, I'd also split the filter function out and name it, for reuse and even better readability:
如果你想让你的代码更具可读性并且你只需要支持 IE9+，你可以使用节点类型常量。就个人而言，我还将过滤器函数拆分出来并命名，以便重用和更好的可读性：
let isTextNode = (_, el) => el.nodeType === Node.TEXT_NODE;
$('#YourDivId').contents().filter(isTextNode).remove();
Here's a snippet with all the examples:
这是包含所有示例的片段：
$('#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>回答by Artur Black
Assuming the following HTML structure:
假设以下 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>
You can achieve your desired behavior by using the following JavaScript + jQuery 2.1 code:
您可以使用以下 JavaScript + jQuery 2.1 代码实现您想要的行为：
$('.element-to-clean').html($('.element-to-clean').children());
回答by mck89
You can do it with simple dom:
你可以用简单的 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]);
}
回答by reko_t
The simplest way would be something like this:
最简单的方法是这样的：
$('#div').html($('<div>').append($('*', '#div')).html());
回答by Mxlfa
Well this probably wont be the best way but i saved the div in a variable and then after i removed all the content in the tag i used append:
好吧，这可能不是最好的方法，但我将 div 保存在一个变量中，然后在删除标签中的所有内容后，我使用附加：
$('.wpcf7 form p').each(function(i){
var el = $(this).find('span');
if(i==4)
el = $(this).find('input');
$(this).empty();
$(this).append(el);
});
回答by Gary Lindahl
$('#yourDiv').text('');
This will remove your text content
这将删除您的文本内容
