Remove() method Does not work

Question

I’m building a gallery with modal. With Javascript I add a class in css, but when I run to remove the same class I added it simply denies the command and nothing happens.

The Html part

<section id="Designs">
<div id="blocoModal" class="Modal">
    <div class="modalCT">
        <button class="fechar">X</button>
        <img src="Imgs_Site/img01Bg.jpg" id="modal_img">
    </div>
</div>    
<center>
    <div class="Bbox"> 
        <div class="box">
            <div class="imgBox"><img class="img00" src="Imgs_Site/img01.jpg"></div>
            <div class="content"><h2>Logo de apresentação <br>de produtos</h2></div>
        </div>
        <div class="box">
            <div class="imgBox"><img src="Imgs_Site/img02.jpg"></div>
            <div class="content"><h2>Promoção de combos de produtos</h2></div>
        </div>
        <div class="box">
            <div class="imgBox"><img src="Imgs_Site/img03.jpg"></div>
            <div class="content"><h2 >Imagem promocional de sorteio realizado no instagram</h2></div>
        </div>
        <div class="box">
            <div class="imgBox"><img src="Imgs_Site/img04.jpg"></div>
            <div class="content"><h2>Divulgação de produtos</h2></div>
        </div>
        <div class="box">
            <div class="imgBox"><img src="Imgs_Site/img05.jpg"></div>
            <div class="content"><h2>Contracapa Ebook Leveza nas emoções</h2></div>
        </div>
        <div class="box">
            <div class="imgBox"><img src="Imgs_Site/img06.jpg"></div>
            <div class="content"><h2>Arte de Divulgação de Ebook Leveza nas emoções</h2></div>
        </div>
        <div class="box">
            <div class="imgBox"><img src="Imgs_Site/img07.jpg"></div>
            <div class="content"><h2>Cartão Digital</h2></div>
        </div>
        <div class="box">
            <div class="imgBox"><img src="Imgs_Site/img08.jpg"></div>                    <div class="content"><h2>Logo Digital</h2></div>    
        </div>
    </div>
</center>

the CSS part

.Modal{
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0, .7);
  position: fixed;
  z-index: 2000;
  display: none;
  justify-content: center;
  align-items: center;
}
.modalCT{
  width: 32vw;
  max-width: 590px;
  height: 85vh;
  max-height: 740px;
  padding: 10px;
  margin-top: 2vh;
  border: #0be2ff solid 5px;
  box-shadow: 0 0 15px #069eb3;
  border-radius: 5px;
  position: relative;
}
#modal_img{
  width: 32vw;
  max-width: 590px;
}
.Modal.mostrar{
  display: flex;
}
.fechar{
  position: absolute;
  top: -2vw;
  right: -4vh;
  width: 3vw;
  max-width: 55px;
  height: 7vh;
  max-height: 55px;
  color: #e00b0b;
  font-size: 1.3em;
  font-weight: 900;
  border-radius: 5px;
  border: #e00b0b solid 1px;
  cursor: pointer;
}

and the Java Part

function iniciaModal(modalID){
    const modal = document.getElementById(modalID);
    modal.classList.add('mostrar');
    modal.addEventListener('click', (e) => {
        if(e.target.id == modalID || e.target.className == 'fechar'){
            modal.classList.remove('mostrar');
        }
    });
}

const imgs = document.querySelectorAll('.imgBox');
imgs.forEach(item => {
    addEventListener('click', () => iniciaModal('blocoModal'));
});

I’m still learning Javascript so I’m sorry any mistake beast.

Answer 1

In this code snippet, you ended up registering an event of click on your page.

imgs.forEach(item => {
    addEventListener('click', () => iniciaModal('blocoModal'));
});

That way, any click on your page ended up starting the modal again...

The correct thing would be to link this event only to its element :

imgs.forEach(item => {
    item.addEventListener('click', () => { iniciaModal('blocoModal') });
});