After .exitD is clicked, which should be hidden?

[htmlcssjavascript28]

.outer-containerA or .containerPageB?

My logical guess would be <div class="outer-containerA hide">

Am I wrong?

<button class="exitD exit" type="button" title="Exit" aria-label="Close"></button>

<div class="outer-containerA hide">
  <div class="containerPageA">
    <div class="video-containerB">
      <div class="ratio-keeper ">
        <div class="wrapB">
          <div class="video playa" data-id=""></div>
        </div>
      </div>
      <div class="playa"></div>
    </div>
    <div class="video-containerB">
      <div class="ratio-keeper">
        <div class="wrapB">
          <div class="video playb" data-id=""></div>
        </div>
      </div>
      <div class="playb"></div>
    </div>
    <div class="video-containerB">
      <div class="ratio-keeper">
        <div class="wrapB">
          <div class="video playc" data-id=""></div>
        </div>
      </div>
      <div class="playc"></div>
    </div>
    <div class="video-containerB">
      <div class="ratio-keeper">
        <div class="wrapB">
          <div class="video playd" data-id=""></div>
        </div>
      </div>
      <div class="playd"></div>
    </div>
    <div class="video-containerB">
      <div class="ratio-keeper">
        <div class="wrapB">
          <div class="video playe" data-id=""></div>
        </div>
      </div>
      <div class="playe" data-id="AxLxnN6z0Og"></div>
    </div>
    <div class="blog-pager">
      <button class="exitC exit" type="button" title="Exit" aria-label="Close"></button>

    </div>

  </div>

  <div class="curtain-containerD hide">
    <div class="slide curtain-leftD">
      <div class="inner">
        <div class="container2"></div>
      </div>
    </div>

    <div class="slide curtain-rightD">
      <div class="inner">
        <div class="container2"></div>
      </div>
    </div>
  </div>

  <div class="containerPageB hide">
    <div class="video-containerB">
      <div class="ratio-keeper">
        <div class="wrapB">
          <div class="video playf" data-id="CHahce95B1g"> </div>
        </div>
      </div>
      <div class="playf"></div>

    </div>
    <div class="video-containerB">
      <div class="ratio-keeper">
        <div class="wrapB">
          <div class="video playg" data-id="AxLxnN6z0Og"></div>
        </div>
      </div>
      <div class="playg"></div>
    </div>
    <div class="video-containerB">
      <div class="ratio-keeper">
        <div class="wrapB">
          <div class="video playh" data-id="AxLxnN6z0Og"></div>
        </div>
      </div>
      <div class="playh"></div>
    </div>
    <div class="video-containerB">
      <div class="ratio-keeper">
        <div class="wrapB">
          <div class="video playi" data-id="AxLxnN6z0Og"></div>
        </div>
      </div>
      <div class="playi"></div>
    </div>
    <div class="video-containerB">
      <div class="ratio-keeper">
        <div class="wrapB">
          <div class="video playj" data-id="AxLxnN6z0Og"></div>
        </div>
      </div>
      <div class="playj"></div>
    </div>
    <div class="blog-pager ">
      <button class="exitD exit" type="button" title="Exit" aria-label="Close"></button>

    </div>
  </div>
  
  <footer class="my-footer">
    <div class="footer-top">
      <a href=" #" target="_blank">something</a><b></b>
      <a href="#" target="_blank">something</a><b></b>
      <a href="#" target="_blank"><span class="text5">something</span><span class="text6">something</span></a><b></b>

      <a href="#" target="_blank">Feedback</a>
    </div>
    <div class="footer-mid">something</div>
    <div class="footer-base">something</div>
  </footer>
</div>

<div class="outer-containerB hide">

  <div class="containerB">
    <div class="video-containerC">
      <button class="exitE exit" type="button" title="ExitE" aria-label="Close"></button>
      <div class="ratio-keeper">

        <div class="wrapB">
          <div class="video playk"></div>
        </div>

        <div class="curtain-leftE">
        </div>
        <div class="curtain-rightE">
        </div>

      </div>
      <div class="playk"></div>
    </div>

    <div class="rcontainer hide">

    </div>
  </div>
</div>

 

[Johna]

According to the code you've provided, nothing will happen then that element is clicked. Am I missing something?

 

[cbreemer]

For all we know that button does not have an onclick handler or form action, and as @Johna writes, it will be doing nothing at all when you click it.

Is there a particular reason for this jumble of <div> 's ? Is this generated or copied code or did you write it like this ?

 

[htmlcssjavascript28]

code: Edit fiddle - JSFiddle - Code Playground

I think it should be changed to: .outer-containerA

function resetPage() {
        hideContainer(".containerPageB"); // or .outer-containerA
        slideCurtain(".video-containerC");
        showContainer(".outer-containerB");
        removePlayer();
    }


    function exitClickHandler() {
        resetPage();
        loadPlayer.add(".playk", {
            videoId: "CHahce95B1g"
        });
    }
    const exitButton = document.querySelector(".exitD");
    exitButton.addEventListener("click", exitClickHandler);
}());

Why would I hide .containerPageB and leave .outer-containerA visible where contained in it is the footer.

Therefore, I should be hiding .outer-containerA which would also keep hidden .containerPageB.

 

[Johna]

Are you asking for advice on which element to hide? That depends entirely on what content you want to hide.

I take it you've already decided on hiding the element with the outer-containerA class?

 

[cbreemer]

I am confused too. If you are sure about what you want to achieve, and seem to know what you need to change to achieve it, why don't you just change it ? Why ask ? Anyway this thing you have is just too big and complicated for someone to try and analyze and troubleshoot.