Hide anything not in a paragraph using CSS or jQuery?

Question

I am looking to hide anything not in a <p> within a certain <div> - specifically anything before the first <p>. For example:

<div id="description">
TEXT I WANT REMOVED
<p>Keep this text</p>
<p>Keep this too</p>
</div>

use `div{ visibility:hidden; } div p{ visibility:visible; }` — Pranav C Balan, Nov 30 '13 at 07:37

score 1 · Accepted Answer · edited May 23 '17 at 12:28

1

there isn't something like a text-node-selector in css, so the only thing that comes to my mind to solve this is setting font-size: 0; for the outer element and back to a normal value for the ps (although this feels kind of... dirty).

see it in action on jsfiddle

edited May 23 '17 at 12:28

Community

1
1

answered Nov 30 '13 at 07:39

oezi

51,017
10
98
115

It works well - but like you said, its not clean to have to reset the font-size on the inner element. – Sam Nov 30 '13 at 07:43
1

still better than using javascript (wich seems to be the only usefil alternative), in my opinion. – oezi Nov 30 '13 at 07:45

score 0 · Answer 2 · answered Nov 30 '13 at 07:36

One option is to use visibility - but the problem is the space occupied by the other elements may not be properly collapsed

#description {
    visibility: collapse;
}
#description p{
    visibility: visible;
}

Demo: Fiddle

Another solution is

$('#description').contents().filter(function(){
    return this.nodeType == 3 && $.trim(this.nodeValue) != '';
}).wrap('<span />').parent().hide()

Demo: Fiddle

Jai · Answer 3 · 2013-11-30T07:44:13.893

0

May be you could try jquery:

var html = $('#description p').map(function(){
    return $(this)[0].outerHTML;
}).get();

$('#description').html(html);

Demo Fiddle to try

edited Nov 30 '13 at 07:44

answered Nov 30 '13 at 07:38

Jai

74,255
12
74
103

Hide anything not in a paragraph using CSS or jQuery?

3 Answers3