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>

Where is "active" class supposed to be? On the "overlay-container" then click is supposed to remove it? — Bilel, Jan 06 '20 at 22:40
First, You have some quotes issue here ! I'm preparing you a fiddle — Bilel, Jan 06 '20 at 22:50
The `.not` function can be used like a filter, it filters the resulting array to exclude the matches from the `.not`. This will not work for the nested hierarchy you have. — nurdyguy, Jan 06 '20 at 22:53
@nurdyguy got it. I thought it could be something simple add into. So thinking need to use the if() inside the click function — Yan Mak, Jan 06 '20 at 22:55
@YanMak yes using a condition inside the click function would do it! That's how I solved it in my updated answer — Bilel, Jan 06 '20 at 23:23

Bilel · Accepted Answer · 2020-01-06T23:14:57.183

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/

edited Jan 06 '20 at 23:14

answered Jan 06 '20 at 22:55

Bilel

1,421
1
10
15

He wants the class to be removed only when the user clicks the outer `.overlay-container` but not the inner `.overlay`. This code does not work. – nurdyguy Jan 06 '20 at 22:56
@YanMak I just updated my answer after understanding the expected result. – Bilel Jan 06 '20 at 23:16

score 0 · Answer 2 · answered Jan 06 '20 at 23:17

You can prevent the event from bubbling up by calling .stopPropagation() on the event. I have made an assumption that the active class is called .overlay-container-active and you are using fixed position to create the overlay background which the content sits within.

I also threw in a button to toggle the overlay so you can see it working. For the buttong I used .on('click') instead of .click(), read more about it at the Difference between .on('click') vs .click()

Worth mentioning if the overlay container and content were siblings then you wouldn't have this problem; just an alternative to think about if you're interested.

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

$('.overlay').click(function(event){
  event.stopPropagation();
});

$('button').on('click', function(event) {
  $('.overlay-container').addClass('overlay-container-active');
});

body {
  margin: 0;
  padding: 0;
  background: darkorange;
}

.overlay-container {
  display: none;
  background: black;
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}

.overlay-container-active {
  display: block;
}

.overlay {
  margin: 15px;
  padding: 15px;
  background: white;
}

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

How to use not selector in jquery - not working

2 Answers2