How to use not selector in jquery - not working

Question

I am fixing an overlay issue here. Not sure is it possible to make it work?

The .overlay-container wrapper is the one with a black color background and makes the overlay center. And the .overlay is the real wrapper that has a white background, close button and the content inside.

What am I trying to do is when user clicks on the .overlay-container area, the -active class will be removed. But the overlay is inside of it, is it possible to say something like “not the overlay area inside”?

$('.overlay-container').not('.overlay-container .overlay').click(function(){
  $(this).removeClass('-active');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="overlay-container">
  <div class="overlay">something inside</div>
</div>

Answer 1

Solved [UPDATE] : This code won't remove the class active unless you click outside the inner overlay.

$(".overlay-container").click(function(event) {
if( $(event.target).hasClass('overlay-container')){
    //alert("removed");
  $( this ).removeClass('active');
 }
});

Working here : https://jsfiddle.net/gquL65ep/