Is there a way to Hide/unhide all child elements of a DOM node in JavaScript?-CodePudding

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

<div id="overlay" >
    <h2 >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

CodePudding user response：

In your css you can create this:

#overlay.hidden-content > * {
 visibility: hidden
}

And add hidden-content to your div with overlay id to hide all the child elements.

CodePudding user response：

display: none; works. Previously I was trying to hide the children by div.className = 'hide' which only took away the styling of the div but not the children elements. div.style.display = 'none'; works