How do I hide children inside a div element when button is pressed? (without hidding parent)

Question

I have this sidebar in my html file that I want to have all sorts of content in it. However, I can't really fit it all inside. I want to hide the default children inside the parent div side-bar . At first I tried making a loop that goes through all the children and changes their style to style.display = 'none'; . That didn't work. I got the error message: code.js:128 Uncaught TypeError: Cannot set property 'display' of undefined

My current code to do my goal is (in javascript):

document.getElementById("other-stats").addEventListener("click",function()
{
        for(var i = 0 ; i < document.getElementById("side-bar").children.length ; i++)
        {
            document.getElementById("side-bar").lastChild.style.display = 'none';
        }
});

I appreciate any answer that anybody can give, but I'm not using Jquery in my code, so I was hoping for some javascript answers.

my html:

        <div id="side-bar">
            <div id="character-view-section">
                <center>
                    <img style="width:150px ; height:200px ; margin-top:50px ;" alt="character">
                </center>
            </div>
            <div id="stats-section">
                <p id="health" style="border:solid 2px crimson ; background-color: crimson ;" class="stats">
                    health: 100
                </p>
                <p id="stamina" style="border:solid 2px rgb(38, 168, 21) ; background-color: rgb(38, 168, 21) ;" class="stats">
                    stamina: 50
                </p>
                <p id="weapon" style="border:solid 2px rgb(20, 197, 220); ; background-color: rgb(20, 197, 220) ;" class="stats">
                    weapon: NOT DETERMINED
                </p>
             </div>
             <div id="inventory-section">

             </div>
                <center>
                    <button id="use-item">
                        use item
                    </button>
                </center>
                <button id="other-stats">
                    other stats
                </button>
        </div>

This is the entire side bar div that I made. Everything inside here, other than the bar, is what I would like to hide in order to place other elements.

Answer 1

You can use #side-bar > * as a selector to select the child elements of the side bar, you can then loop through them to hide them programatically.

document.getElementById("other-stats").addEventListener("click",function()
{
        var childElements = document.querySelectorAll("#side-bar > *" )
        for(var i = 0 ; i < childElements.length ; i++)
        {
            childElements[i].style.display = 'none';
        }
});

Answer 2

Add a class such as "hideMe" to every all elements you want to hide, then on button click you can fire this function:

let children = document.querySelectorAll(".hideMe");
function hide() {
  for (var i = 0; i < children.length; ++i) {
    children[i].style.display = 'none';
  }
}