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:
HTML Code:
<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?