Problem with lightbox, on click event is not working

I have a stupid problem with jQuery.. I’m trying to make a simple lightbox and I have problems with the “close” button.. Here is what I have – a grid with some color variations. We have an image and a text for the color. When we click on it, we should see the image in a lightbox with bigger size. To do so, I’m just adding and removing a class. The weird thing is that the on click on the close is working, the console log is displayed, but the class is not removed.. Why is that? What do I do wrong here? Shouldn’t the function on the close button remove the class from all elements?

var colorVariation = $('.product-variations__color');
var colorPopUp = $('.product-variations__color-popup');

colorVariation.on('click', function () {
  $(this).find(colorPopUp).addClass('is-active');
});

$('.close').on('click', function() {
    colorPopUp.removeClass('is-active');
  console.log('woohoo');
});

.product-variations {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.product-variations__color {
  max-width: calc((100% / 4) - 20px);
  padding: 0 10px 50px;
}

.product-variations__color-name {
  width: 100%;
  text-align: center;
}

.product-variations__color-popup {
  display: none;
}

.product-variations__color-popup.is-active {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

.product-variations__color-popup.is-active .close {
  filter: difference;
  position: absolute;
  top: 20px;
  left: 20px;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-variations">
  <div class="product-variations__color">
    <img src="https://via.placeholder.com/150x150/ff0000" />
    
    <div class="product-variations__color-name">
      Red
    </div>
    
    <div class="product-variations__color-popup">
      <div class="close">&times;</div>
      
      <img src="https://via.placeholder.com/1500x1500/ff0000" />
    </div>
  </div>
  
  <div class="product-variations__color">
    <img src="https://via.placeholder.com/150x150/008000" />
    
    <div class="product-variations__color-name">
      Green
    </div>
    
      <div class="product-variations__color-popup">
    <div class="close">&times;</div>
      
      <img src="https://via.placeholder.com/1500x1500/008000" />
    </div>
  </div>
  
  <div class="product-variations__color">
    <img src="https://via.placeholder.com/150x150/0000ff" />
    
    <div class="product-variations__color-name">
      Blue
    </div>
    
      <div class="product-variations__color-popup">
    <div class="close">&times;</div>
      
      <img src="https://via.placeholder.com/1500x1500/0000ff" />
    </div>
  </div>
  
  <div class="product-variations__color">
    <img src="https://via.placeholder.com/150x150/800080" />
    
    <div class="product-variations__color-name">
      Purple
    </div>
    
    <div class="product-variations__color-popup">
      <div class="close">&times;</div>
      
      <img src="https://via.placeholder.com/1500x1500/800080" />
    </div>
  </div>
  
  <div class="product-variations__color">
    <img src="https://via.placeholder.com/150x150/FFFF00" />
    
    <div class="product-variations__color-name">
      Yellow
    </div>
    
    <div class="product-variations__color-popup">
      <div class="close">&times;</div>
      
      <img src="https://via.placeholder.com/1500x1500/FFFF00" />
    </div>
  </div>
  
  <div class="product-variations__color">
    <img src="https://via.placeholder.com/150x150/00FFFF" />
    
    <div class="product-variations__color-name">
      Cyan
    </div>
    
    <div class="product-variations__color-popup">
      <div class="close">&times;</div>
      
      <img src="https://via.placeholder.com/1500x1500/00FFFF" />
    </div>
  </div>
  
  <div class="product-variations__color">
    <img src="https://via.placeholder.com/150x150/BFFF00" />
    
    <div class="product-variations__color-name">
      Lime
    </div>
    
    <div class="product-variations__color-popup">
      <div class="close">&times;</div>
      
      <img src="https://via.placeholder.com/1500x1500/BFFF00" />
    </div>
  </div>
  
  <div class="product-variations__color">
    <img src="https://via.placeholder.com/150x150/000000" />
    
    <div class="product-variations__color-name">
      Black
    </div>
    
    <div class="product-variations__color-popup">
      <div class="close">&times;</div>
      
      <img src="https://via.placeholder.com/1500x1500/000000" />
    </div>
  </div>
</div>

Answer

The problem is you are triggering the other click call that adds the class back onto the element because the event listener is on a parent. So the child is triggered, followed by the parent. If you stop the click, it will not trigger on the parent.

$('.close').on('click', function(event) {
    event.stopPropagation();
    colorPopUp.removeClass('is-active');
});