title: Jquery wouldn't hide an element
body: <p>Done this a few times before, but something is wrong this time. Trying to create a popup. As you can guess, initially, it's hidden. It does show up on click, but when i try to close it, nothing happens. Also, when i try to change styles to display:none in developer tools, it switches back to display:block. Currently it's in the head section of the page, but i've tried placing it in the very bottom as well.</p>
  
  <p>html of it</p>
  
  <pre><code>&lt;div class="tablecell midlineunit popup-hml middle"&gt;
      &lt;div class="hml-popup-bg popupbg "&gt;
          &lt;div class="hml-popup-cnt"&gt;
              &lt;div class="closepopup"&gt;X&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and js of it</p>
  
  <pre><code>$(".popup-hml").each(function(){
       $(this).click(function(){
           $(this).find(".hml-popup-bg").show();
       });
  });
  $(".closepopup").each(function(){
      $(this).click(function(){
          $(this).parent().parent().hide();
      });
  });
  </code></pre>
  
  <p>and of course .hml-popup-bg is hidden in css</p>