title: Remove class from body when modal is closed with vanilla javascript
body: <p>I have multiple modals on my page that open when click on the respective button.
  When a modal is open it adds the class <code>.has-modal-open</code> to the body to prevent the page from scrolling.
  The problem is when I close the modal that class doesn't get removed from the body tag. I tried <code>body.classList.remove('has-modal-open');</code> but for some reason it just doesn't work.
  I'm looking for a vanilla javascript solution.</p>
  <p>Thank you.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  const modal = document.querySelectorAll('.modal');
    const modalOpenButtons = document.querySelectorAll('[data-open-modal]');
    const modalCloseButtons = document.querySelectorAll('[data-close-modal]');
    const body = document.querySelector('body');
    
    for (let i = 0; i &lt; modalOpenButtons.length; i++) {
      const modalOpenButton = modalOpenButtons[i];
      modalOpenButton.addEventListener('click', e =&gt; {
        body.classList.add('has-modal-open');
        const modalDataAttribute = e.target.getAttribute('data-open-modal');
        document.querySelector('.modal[data-open-modal=\''.concat(modalDataAttribute, '\']')).classList.add('modal--is-open');
      });
    }
    
    for (let i = 0; i &lt; modalCloseButtons.length; i++) {
      body.classList.remove('has-modal-open');
      const modalCloseButton = modalCloseButtons[i];
      modalCloseButton.addEventListener('click', e =&gt; {
        e.target.closest('.modal').classList.remove('modal--is-open');
      });
    }
    
    for (let i = 0; i &lt; modal.length; i++) {
      const modals = modal[i];
      document.addEventListener('keydown', e =&gt; {
        if (e.keyCode === 27) {
          modals.classList.remove('modal--is-open')
        }
      })
      modals.addEventListener('click', e =&gt; {
        e.target.classList.remove('modal--is-open')
      })
    }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.modal {
    display: none;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: calc(100% - 48px);
    background: rgba(0, 0, 0, 0.45);
    z-index: 90;
  }
  
  .modal__header {
    position: relative;
    border-radius: 4px 4px 0 0;
    background-color: white;
    width: 100%;
    min-height: 60px;
    overflow: auto;
  }
  
  .modal__body {
    position: relative;
    width: calc(100% - 48px);
    max-width: 900px;
    max-height: calc(100% - 48px);
    overflow: hidden;
    border-radius: 4px;
    max-height: 700px;
    background: white;
  }
  
  .modal__content {
    padding: 0 40px 40px;
    overflow: auto;
    height: 100px;
  }
  
  .modal--is-open {
    display: flex;
  }
  
  .has-modal-open {
    overflow-y: hidden;
  }
  
  
  .modal__close {
    position: absolute;
    top: 32px;
    right: 12px;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    padding: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button class="button" data-open-modal="open-modal-1"&gt;Open modal&lt;/button&gt;
  
  &lt;div class="modal" data-open-modal="open-modal-1"&gt;
    &lt;div class="modal__body"&gt;
      &lt;div class="modal__header"&gt;
        &lt;button class="modal__close" data-close-modal&gt;X&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="modal__content"&gt;
        My modal
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>