Say I have the following HTML and I want to hide all the children of the 'overlay' div dynamically

<div id="overlay" class="foo">
    <h2 class="title">title</h2>
    <h1 id="bar">sub-title</h1>
    <button id="reset">reset</button>
</div>

is there a better way to mass hide/unhide these elements than calling .className = 'hide' on them individually?

*note that I want to retrieve those later so looping over them with .remove() or setting div innerHTML to an empty string is not an option