title: hide error message on click
body: <p>I've got a simple login form with email and password I have this code to validate the email</p>
  
  <pre><code>$(document).ready(function() {
  
  $('#login-submit').click(function() {
  
      $(".error").hide();
      var hasError = false;
      var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
  
      var emailaddressVal = $(".email").val();
      if(emailaddressVal == '') {
          $(".email").after('&lt;span class="error"&gt;Please enter your email address.&lt;/span&gt;');
          hasError = true;
      }
  
      else if(!emailReg.test(emailaddressVal)) {
          $(".email").after('&lt;span class="error"&gt;Enter a valid email address.&lt;/span&gt;');
          hasError = true;
      }
  
      if(hasError == true) { return false; }
  
      });
  });
  </code></pre>
  
  <p>the span with the class of .error (as per the design I've got) hides the input element.</p>
  
  <p>I want to hide the error message again when I click it</p>
  
  <pre><code>$(document).ready(function() {
  $('.error').click(function() {
      $(".error").remove();
  });
  
  });
  </code></pre>
  
  <p>but this does nothing. Anyone know what I'm doing wrong here?</p>