Question

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

如何隐藏父div（父文本）的文本，使“child1 text”和“child2 text”可见。

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

Answer 1

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

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

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

FIDDLE

Answer 2

尝试

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

演示：Fiddle

Answer 3

尝试以下

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

<强> DEMO

Answer 4

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

<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();

仅隐藏父div文本

5 个答案: