I'm trying to remove sort ascending / descending from any th in the thead and apply it to the newly selected td...

The code below works. But notice that I'm only removing sort from all the th items in the thead. What's strange is when I try to do .removeClass('sort ascending descending'); it no longer allows the th to toggle - meaning that if it's ascending go descending and vice verse... It's strange...


Code JavaScript:
function SortSetup(table) {
    $('.thead', table).delegate('a', 'click', function(event) {
        //First thing we need to do is remove sort from all th
        $(this).parents('tr').find('th').removeClass('sort');
 
        var th = $(this).parent('th');
 
        if (th.hasClass('ascending')) {
            th.removeClass('ascending').addClass('sort descending');
        } else {
            th.removeClass('descending').addClass('sort ascending');
        }
 
    });
}

Code HTML4Strict:
<tr class="thead">
<th scope="col" class="cInput"><input type="checkbox"  value="users"></th>
<th scope="col" class="c3"><a rel="UserName"  href="#">Username</a></th>
<th scope="col" class="c2"><a rel="FirstName" href="#">First  Name</a></th>
<th scope="col" class="c2"><a rel="LastName" href="#">Last  Name</a></th>
<th scope="col" class="c4"><a rel="Email"  href="#">Email</a></th>
<th scope="col" class="c2"><a rel="RoleName"  href="#">Role</a></th>
<th scope="col" class="c1"><a rel="CreateDate"  href="#">Created</a></th>
<th scope="col" class="c1 sort descending"><a  rel="LastLoginDate" href="#">Last Login</a></th>
<th scope="col" class="cActionable">&nbsp;</th>
</tr>