Hideing Content: CSS or Javascript

JavaScript
1

I’ve got a (javascript) script that adds elements to an element. On a certain moment in time the content of the parent elment might look like this:


<UL>
<LI>lorem</LI>
<LI>Ipsum</LI>
</UL>
<UL class="notImportant">
<LI>dolor</LI>
<Li>sit</LI>
</UL>
<!--- .... -->

now I wont to make a button witch hides all the non-imprtant elements.

So I found solutions:

  1. selecting all the elements with the class “notImportant” and hide them with JavaScript:. and hide unimportant ones when adding it to the DOM
    (all Javascript)
  2. add a class to the header (‘only_important’) with Javascript, and my CSS ‘.only_impotant .notImportant { display:none;}’
    (Use Javascript once and let CSS do the rest)

Important:: the solution should hide all ‘notImportant’ even if they are newly added, (and be easily reversible)

what would be the best (/fastest/most efficient /…) solution? or what are the pros and cons from my posibilitys? Are there othter ways to do this?

2

The standard convention is to use CSS to style the normal presentation of the elements, and to JavaScript to assign a class name to elements that should be hidden, so that CSS can then automatically hide those elements for you.