How do I get one of my HTML elements to disappear at the click of a button?

Question

I need help with this code. How do I get the subscription box to disappear after clicking the "subscribe" button?

 <div class="col1"> <div class = "box_1"> <h1 class="top-stories">Top Stories</h1> <ul class="box_1_list"> <ul class="box_1_text">Ninjas up big in 5th</ul> <ul class="box_1_text">Best sports cities</ul> <ul class="box_1_text">Choi joins Hall of Fame</ul> <ul class="box_1_text">Tournament underway</ul> <ul class="box_1_text">Samurai at Wizards...</ul> </ul> </div> <div class="box_2"> <h4 class="custom_dsnn">Customize Your DSNN</h4> <div class="button_row"> <button class = "button1" type="submit">Sign In</button> <button class = "signup" type="submit">Sign Up</button> </div> </div> <div id="box_3" onclick="hide(this)"> <h4 class="never">Never miss a play</h4> <button onclick="hide(Element)" class = "disappear" type="checkbox">Subscribe</button> </div> </div>

How do I get box_3 to disappear when you click the subsribe button? I'm trying to go for something like the 0:08 seconds point of this video. https://youtu.be/RuiCMXbYJhM

Answer 1

<div class="col1">
    <div class ="box_1">
        <h1 class="top-stories">Top Stories</h1>
        <ul class="box_1_list">
            <ul class="box_1_text">Ninjas up big in 5th</ul>
            <ul class="box_1_text">Best sports cities</ul>
            <ul class="box_1_text">Choi joins Hall of Fame</ul>
            <ul class="box_1_text">Tournament underway</ul>
            <ul class="box_1_text">Samurai at Wizards...</ul>
        </ul>
    </div>
    <div class="box_2">
        <h4 class="custom_dsnn">Customize Your DSNN</h4>
            <div class="button_row">
                <button class="button1" type="submit">Sign In</button>
                <button class="signup" type="submit">Sign Up</button>
            </div>
    </div>
    <div id="box_3" class="hideWhenClick">
        <h4 class="never">Never miss a play</h4>
        <button id="hide" class ="disappear" type="checkbox">Subscribe</button>
    </div>
</div>
<script>
    const button = document.getElementById("hide");
    const hideWhenClick = document.querySelector(".hideWhenClick");
    button.addEventListener("click", ()=>{
        //this will add a class hidden when click try giving this class(disappear) a visiblity: hidden;
        hideWhenClick.classList.add("disappear");
        //or simply 
        hideWhenClick.style.visibility ="hidden";
    });
</script>