javascript - 仅隐藏父 div 文本

Question

我有一个父 div，里面有两个子 div。

如何隐藏父 div 的文本（父文本）保持“child1 文本”和“child2 文本”可见。

<div id="parent">
    parent text
    <div id="child1">child1 text</div>
    <div id="child2">child2 text</div> 
</div> 

Answer 1

Try

var x = $('#parent').contents().filter(function(){
    return this.nodeType == 3
}).wrap('<span/>').parent().hide()

Demo: Fiddle

Answer 2

您只能隐藏实际元素，隐藏元素也会隐藏所有子元素，因此您必须将文本节点包装在它们自己的元素中，然后隐藏这些元素：

$('#parent').contents().filter(function() {
    return this.nodeType==3;
}).wrap('<span class="text"></span>');

$('.text').hide();

小提琴

Answer 3

尝试以下

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

演示

Answer 4

如果您坚持直接使用 HTML/JavaScript，则可以将“父文本”包装在<span>. IE，

<div id="parent">
    <span id="parent-text-id">parent text</span>    
    <div id="child1">
        child1 text
    </div>    
    <div id="child2">
        child2 text
    </div>     
</div> 

这样，您可以在想要隐藏它时引用该文本。祝你好运！

Answer 5

作为替代答案，其他人将返回并隐藏 内的所有文本节点#parent，这只会隐藏第一个childNode：

$(document.getElementById('parent').childNodes[0]).wrap('<span/>').parent().hide();