Why is removeClass is not working in this case?
<p>I have the following:</p>

<p><strong>JS:</strong></p>

<pre><code>  $('.home-toggle').click(function() {
    scroll();
    $('#content twelvecol &gt; a').removeClass('selected-tile');
    $(this).addClass('selected-tile');
    $('.hidden').hide();
    $('.home-container').slideDown();
  });

  $('.why-toggle').click(function() {
    scroll();
    $('#content twelvecol &gt; a').removeClass('selected-tile');
    $(this).addClass('selected-tile');
    $('.hidden').hide();
    $('.why-container').slideDown();
  });
</code></pre>

<p><strong>HTML:</strong></p>

<pre><code>&lt;div id="content" class="container" style="display:none;"&gt;
  &lt;div class="row"&gt;
    &lt;div class="twelvecol"&gt;
      &lt;a href="#" class="home-toggle tile first"&gt;
        &lt;img class="tile-top" src="images/tile1.png" alt="" /&gt;
        &lt;img class="tile-bottom" src="images/tile1h.png" alt="" /&gt;
      &lt;/a&gt;
      &lt;a href="#" class="why-toggle tile"&gt;
        &lt;img class="tile-top" src="images/tile2.png" alt="" /&gt;
        &lt;img class="tile-bottom" src="images/tile2h.png" alt="" /&gt;
      &lt;/a&gt;
      &lt;a href="#" class="solutions-toggle tile last"&gt;
        &lt;img class="tile-top" src="images/tile3.png" alt="" /&gt;
        &lt;img class="tile-bottom" src="images/tile3h.png" alt="" /&gt;
      &lt;/a&gt;
</code></pre>

<p>So <code>.selected-tile</code> should be removed from the other <code>.tile</code> once I click on one.</p>

<p>But for some reason, the class still remains in other tiles.</p>

<p>What could be the problem?</p>
