title: Why can't jquery remove these classes?
body: <p>I have created a series of elements that when you click on any one of them, they will expand, pushing the other elements out of the way. Initially if you clicked on it again the element would contract, but now I want to take the close functionality and put it in a button with in the element. 
  Initially when you click on the element, I use jQuery to add a number of classes to a variety of elements. </p>
  
  <pre><code>$(".left &gt; .elem").click(function () {
      $(this).addClass("expand");
      $(this).parent().addClass("WithLarge");
      $(this).children(".bar").addClass("visible");
      $(this).children(".reduce_button").addClass("visible");
      $(".right").addClass("shift_right");
  });
  </code></pre>
  
  <p>When I click the close button I would like to remove those classes. </p>
  
  <pre><code>$(".reduce_button").click(function () {
      $(this).parent().removeClass('expand');
      $(this).parent().removeClass("WithLarge");
      $(this).parent().children(".bar").removeClass("visible");
      $(this).parent().children(".reduce_button").removeClass("visible");
  }
  </code></pre>
  
  <p>The problem is, those classes aren't budging. </p>
  
  <p>You can try it out on the <a href="http://jsfiddle.net/easilyBaffled/HybHK/7/" rel="nofollow">JSFiddle</a></p>
  
  <p>Click on the yellow box(<code>".left &gt; .elem"</code>), it expands pushing the others out of the way, click on the red box(<code>".reduce_button"</code>), and nothing happens. I tried  </p>
  
  <pre><code>console.log($(this).parent().hasClass('expand'));
  $(this).parent().removeClass('expand');
  console.log($(this).parent().hasClass('expand'));
  </code></pre>
  
  <p>to see if it has been removed. It returns false, even though the class is still there.
  Why can't I remove these classes?</p>