title: jQuery onclick Add/Remove class of child element
body: <p>Here is the HTML:</p>
  
  <pre><code>&lt;a id="docLocked" title="Unlock this document" style="text-decoration: none; cursor: pointer;"&gt;&lt;span class="iconfa-lock"&gt;&lt;/span&gt;&lt;/a&gt;
  </code></pre>
  
  <p>When the 'icon' is clicked I need it to remove the class of the span element and then add another class.</p>
  
  <p>Here is what I have but it is not working:</p>
  
  <pre><code>jQuery('#docLocked').click(function () {
          jQuery(this).closest('span').removeClass('iconfa-lock');
          jQuery(this).closest('span').addClass('iconfa-unlock');
      });
  </code></pre>
  
  <p>What am I doing wrong here?</p>