title: jQuery: remove or hide overlay div?
body: <p>I'm creating an <code>overlay div</code> using the following code when an image thumbnail is clicked:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  jQuery(document).ready(function(){
  
  
      jQuery(".test-popup-link").click(function(e) {
  
         var overlay = jQuery('&lt;div align="center" id="overlay"&gt;&lt;img id="imgBig" src="" /&gt;&lt;/div&gt;');
  overlay.appendTo(document.body);
  //jQuery('#overlay').load(this.href);
  
  var imgs = (this.href);
  
  jQuery('#overlay #imgBig').attr("src", imgs)
          return false;
      });
  
  
  
  
  });
  
  
  &lt;/script&gt;
  </code></pre>
  
  <p>This works fine.</p>
  
  <p>Now i need to remove or hide the overlay div when the user clicks on the <code>img</code> with the id of <code>imgBig</code>. so I tried this:</p>
  
  <pre><code>    &lt;script&gt;
      jQuery(document).ready(function(){
  
              jQuery( "#overlay #imgBig" ).click(function() {
        jQuery("#overlay").remove();
      });
  
      return false;
              });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>but for some reason it just doesn't work which means it doesn't hide/remove the <code>overlay</code> div!</p>
  
  <p>Could someone please advise on this issue?</p>
  
  <p>Thanks in advance.</p>