title: Selector :not in jQuery not working
body: <p>I have a body with ID <code>body</code> and inside it a div with class <code>nav-container</code>. I want to remove certain classes when users click on the <code>#body</code>, but not <code>.nav-container</code> (it's an overlay type of menu).</p>
  
  <p>Tried below code</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body id="body"&gt;
    &lt;div class="nav-container"&gt;
      &lt;a href="#" id="close-btn"&gt; X &lt;/a&gt;
      &lt;nav class="display"&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt; One &lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt; Two &lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt; Three &lt;/a&gt;&lt;/li&gt;
       &lt;/ul&gt;
     &lt;/nav&gt;
   &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>$('#body :not(.nav-container)').click(function() {
      $('.cover').removeClass('active-cover');
      $('.nav-container').removeClass('active');
  });
  </code></pre>
  
  <p>It does not seem to be working for me though.</p>