How to remove hide class from html element

Question

There is a hide on .container3, how do I remove that hide like how it was removed from .container2?

Clicking the 1st exit button removes hide from .container2 Clicking the 2nd exit button should remove hide from .container3

<button class="exit" type="button" aria-label="Open"></button>

How would I remove hide from .container3 in the code?

How would it be written?

<div class="container3 hide"></div>

I currently have this: https://jsfiddle.net/u9h8fwz5/

Any answer provided, can you check first that it works in the code.

The exit button is not clickable on page 2.

To get to page 2 click the exit button.

I am not sure what needs to be done in the code.

Clicking on this Exit button

<div class="container1">
<button class="exit" type="button" aria-label="Open"></button>
</div>

Removes This hide Clicking on this Exit button

<div class="container2 hide">
<button class="exit" type="button" aria-label="Open"></button>
</div>

Should remove this hide

<div class="container3 hide"></div>

Html

<div class="container1 ">
  <div class="ratio-keeper">
    <div class="wrap embed-youtube ">
      <div class="video embed-youtube  " data-id="djV11Xbc914">
      </div>
      <button class="playa cover playgreen  embed-youtube-play" type="button" aria-label="Open"></button>
    </div>
  </div>
  <button class="exit" type="button" aria-label="Open"></button>
</div>
<div class="container2 hide">
  <div class="container">
    <div class="ratio-keeper">
      <div class="wrap embed-youtube">
        <div class="video embed-youtube" data-id="djV11Xbc914">
        </div>
        <button class="playb cover embed-youtube-play" type="button" aria-label="Open"></button>
      </div>
    </div>
    <button class="exit" type="button" aria-label="Open"></button>
    <div class="ratio-keeper">
      <div class="wrap embed-youtube">
        <div class="video embed-youtube" data-id="djV11Xbc914">
        </div>
        <button class="playc cover embed-youtube-play" type="button" aria-label="Open"></button>
      </div>
    </div>
    <div class="ratio-keeper">
      <div class="wrap embed-youtube">
        <div class="video embed-youtube" data-id="djV11Xbc914">
        </div>
        <button class="playd cover embed-youtube-play" type="button" aria-label="Open"></button>
      </div>
    </div>
    <div class="ratio-keeper">
      <div class="wrap embed-youtube">
        <div class="video embed-youtube" data-id="djV11Xbc914">
        </div>
        <button class="playe cover embed-youtube-play" type="button" aria-label="Open"></button>
      </div>
    </div>
    <div class="ratio-keeper">
      <div class="wrap embed-youtube">
        <div class="video embed-youtube" data-id="djV11Xbc914">
        </div>
        <button class="playf cover embed-youtube-play" type="button" aria-label="Open"></button>
      </div>
    </div>
  </div>
</div>
<div class="container3 hide">
  <div class="container">
    <div class="ratio-keeper">
      <div class="wrap embed-youtube">
        <div class="video embed-youtube" data-id="djV11Xbc914">
        </div>
        <button class="playg cover embed-youtube-play" type="button" aria-label="Open"></button>
      </div>
    </div>
    <div class="ratio-keeper">
      <div class="wrap embed-youtube">
        <div class="video embed-youtube" data-id="djV11Xbc914">
        </div>
        <button class="playh cover embed-youtube-play" type="button" aria-label="Open"></button>
      </div>
    </div>
    <div class="ratio-keeper">
      <div class="wrap embed-youtube">
        <div class="video embed-youtube" data-id="djV11Xbc914">
        </div>
        <button class="playi cover embed-youtube-play" type="button" aria-label="Open"></button>
      </div>
    </div>
    <div class="ratio-keeper">
      <div class="wrap embed-youtube">
        <div class="video embed-youtube" data-id="djV11Xbc914">
        </div>
        <button class="playj cover embed-youtube-play" type="button" aria-label="Open"></button>
      </div>
    </div>
    <div class="ratio-keeper">
      <div class="wrap embed-youtube">
        <div class="video embed-youtube" data-id="djV11Xbc914">
        </div>
        <button class="playk cover embed-youtube-play" type="button" aria-label="Open"></button>
      </div>
    </div>
  </div>
</div>

Javascript

function show(el) {
  el.classList.remove("hide");
}

function hide(el) {
  el.classList.add("hide");
}

function exitClickHandler() {
  const thewrap = document.querySelector(".container2");
  show(thewrap);
  const cover = document.querySelector(".container1");
  hide(cover);
}

CSS

.container2 .container {
  background: teal;
}

.container3 .container {
  background: red;
}

Here was my attempt: https://jsfiddle.net/59wjuhxv/

(function manageCover() {

  function hide(el) {
    el.classList.add("hide");
  }

  function show(el) {
    el.classList.remove("hide");
  }

  function exitClickHandler() {
    const thewrap = document.querySelector(".container3");
    show(thewrap);
    const cover = document.querySelector(".container1");
    hide(cover);
  }

  const cover = document.querySelector(".exit");
  cover.addEventListener("click", exitClickHandler);
}());


(function manageCover() {

  function hide(el) {
    el.classList.add("hide");
  }

  function show(el) {
    el.classList.remove("hide");
  }

  function exitClickHandler() {
    const thewrap = document.querySelector(".container2");
    show(thewrap);
    const cover = document.querySelector(".container1");
    hide(cover);
  }

  const cover = document.querySelector(".exit");
  cover.addEventListener("click", exitClickHandler);
}());

Answer 1

You can toggle based on several measures. Here I show two examples side by side. First example toggles the hide class to match your example using data attributes to say what a button targets out of convience.

Second example; I change a value of a data attribute and have CSS which indicates the color to use dependent on that value. For this second example I could easily toggle multiple values into the same data attribute for example red/green/yellow for a stoplight if we had 3 CSS settings.

function doClick(event) {
  const t = event.currentTarget.dataset.hit;
  const containerTargets = document.querySelectorAll(t);
  containerTargets.forEach(container => container.classList.toggle("hide"));
}
const actions = document.querySelectorAll(".toggle-fun");
actions.forEach(tg => tg.addEventListener("click", doClick));

function doFun(event) {
  const t = event.currentTarget.dataset.hit;
  const containerTargets = document.querySelector(".container-datafun").querySelectorAll(t);
  containerTargets.forEach(container => container.dataset.hitme = container.dataset.hitme == "yes" ? "no" : "yes");
}
const funBlock = document.querySelector(".fun-button-container");
let funs = funBlock.querySelectorAll(".toggle-d");
funs.forEach(tg => tg.addEventListener("click", doFun))

.wrapper {
  display: flex;
  flex-direction: row;
}

.wrapper>* {
  border: solid lime 1px;
  padding: 0.5em;
}

.containers .container1 {
  background-color: teal;
}

.containers .container2 {
  background-color: red;
}

.hide {
  display: none;
}

.container-datafun {
  display: flex;
  margin: 1em;
}

.container-datafun>.funguy {
  border: solid blue 1px;
  margin: 0.5em;
  padding: 0.25em;
  background-color: #ffddff;
}

.container-datafun>.funguy[data-hitme="yes"] {
  background-color: #ddffff;
}

<div class="wrapper">
  <div>
    <div class="containers">
      <div class="container1">I am the 1</div>
      <div class="container2 hide">I am the 2</div>
      <div class="container3 hide">I am the 3</div>
    </div>
    <div class="button-container">
      <button type="button" class="toggle-fun" data-hit=".container2">Two</button>
      <button type="button" class="toggle-fun" data-hit=".container1">One</button>
      <button type="button" class="toggle-fun" data-hit=".container1, .container2">1 and 2</button>
      <button type="button" class="toggle-fun" data-hit=".container3">Three</button>
    </div>
  </div>
  <div>I toggle the colors using data but it could be anything.
    <div class="container-datafun">
      <div class="funguy me1">I am the 1</div>
      <div class="funguy me2">I am the 2</div>
      <div class="funguy me3">I am the 3</div>
    </div>
    <div class="fun-button-container">
      <button type="button" class="toggle-d" data-hit=".funguy.me1">Two</button>
      <button type="button" class="toggle-d" data-hit=".me2">One</button>
      <button type="button" class="toggle-d" data-hit=".me1, .me2">1 and 2</button>
      <button type="button" class="toggle-d" data-hit=".me3">Three</button>
    </div>
  </div>
</div>