javascript - 親の div テキストのみを非表示にする

Question

その中に2つの子divがある親divがあります。

「child1 テキスト」と「child2 テキスト」を表示したまま、親 div (親テキスト) のテキストを非表示にするにはどうすればよいですか。

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

フィドル

Answer 2

試す

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

デモ:フィドル

Answer 3

以下を試してください

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

デモ

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