Execute an event when everything is clicked except one element?
<pre><code>'&lt;div class="lightbox-con"&gt;
     &lt;div class="lightbox-shade"&gt;&lt;/div&gt;
     &lt;span class="logo"&gt;&lt;/span&gt;
     &lt;div class="controls"&gt;
         &lt;span class="arrow back"&gt;&lt;/span&gt;&lt;span class="close"&gt;&lt;/span&gt;&lt;span class="arrow forward"&gt;&lt;/span&gt;
     &lt;/div&gt;
     &lt;div class="caption"&gt;
         &lt;p class="caption-text"&gt;&lt;/p&gt;
         &lt;span class="logo2" &gt;&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;'
</code></pre>

<p>The markup above is a lightbox. Given it's already in an overly state, how do I close/remove it when everything is clicked except the <code>.arrow</code> elements? I tried so many ways and one of them is this:</p>

<pre><code>$(':not(.arrow)').click(function(){
   $('.lightbox-con').remove();
});
</code></pre>

<p>The code above won't even allow the lightbox to launch :-\</p>
