title: Remove class from parent on child click - jQuery
body: <p>I am completely stuck on this problem (<a href="https://jsfiddle.net/devlizard/LdbrzknL/2/" rel="nofollow">see jsfiddle here</a>). I have a very simple set up where an <code>onclick</code> adds a class which displays an element. Within this element is a close button for which the <code>onclick</code> should remove the class from the parent. But this is not working. </p>
  
  <p>I have tried <code>removeAttr('class')</code> which also fails. Looking in chrome inspector I can see the <code>selector</code> is right and is targeting the parent, but the class cannot be removed. </p>
  
  <p>This is part of a larger project so I cannot change the html structure. But welcome any suggestions on how to do this in jQuery. </p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div class="print-wrap"&gt;
      &lt;ul&gt;
          &lt;li class="settings-tab"&gt;+&lt;/i&gt;
              &lt;div class="settings-wrap"&gt;
                  &lt;div class="iphone-close"&gt;x&lt;/div&gt;
                  &lt;div class="content"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="img"&gt;
              &lt;img src="http://placehold.it/250x166"&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>jQuery(function(){
      jQuery('.settings-tab').click(function(){
          var $this = jQuery(this);
          $this.addClass('settings-out');
      });
  
      jQuery('.settings-wrap .iphone-close').click(function(e){
          var $this = jQuery(this);
          var $parent = $this.parent('.settings-wrap').parent('.settings-tab');
          $parent.removeClass('settings-out');
      });
  });
  </code></pre>