javascript - Can I hide a HTML tag by the content/value it contains? -


this question has answer here:

i'm attempting hide h1 tag 1 page, it's dynamic page not hooks can target. hoping quick fix css target content.

i've done research , attempted following methods:

<div id="pageh1"> <h1>value</h1> <div class="clear"></div> </div>   h1[att~=value] {     display:none; }  h1[att=value] {     display:none; } 

however neither have worked, wondering if can done css or need use js?

you can't via css, may become feature of css4, not work of css3.

you have via javascript.

here simple jquery example. (view jsfiddle)

$('h1:contains("value")').hide(); // hide h1 element contains "value" 

the above code match all of following lines.

<!-- 3 h1 tags matched --> <h1>value<h1> <h1>value #2<h1> <h1>this h1 "value" #3</h1> 

you add .no-hide class , following:

// hide h1 tags value, except .no-hide $('h1:contains("value"):not(.no-hide)').hide(); 

this result in:

<h1>value</h1>                                             <!-- hidden --> <h1>value #2</                                             <!-- hidden --> <h1>this h1 "value" #3</h1>                <!-- hidden --> <h1 class="no-hide">this has value not hide</h1>  <!-- not hidden --> 

doing require in pure css impossible (to knowledge correct me if im wrong).


Comments