CSS nth-of-type not updating after JS removal of class

CSS nth-of-type not updating after JS removal of class

I've created this JSFiddle of the below: http://jsfiddle.net/qTLmV/
Here is the CSS I'm using:
.nested > .addable-group > div.active:nth-of-type(even) {
background: blue;
}
.nested > .addable-group > div.active:nth-of-type(odd) {
background: grey;
}
The simplified layout:
<div class="nested">
<div class="addable-group">
<div class="active"><a href="#">remove 1</a></div>
<div class="active"><a href="#">remove 2</a></div>
<div class="active"><a href="#">remove 3</a></div>
<div class="active"><a href="#">remove 4</a></div>
</div>
</div>
The JS
$(document).on("click", "a", function(event) {
var container = $(this).parent();
container.hide();
container.removeClass("active");
//container.remove();
return event.preventDefault();
});
What I'm trying to do is, if any of the "remove" links are clicked they
should get hidden, have their "active" class removed and the alternating
background colors should stay consistent. However, I haven't been able to
get this working. If I remove the DOM element completely it works, but
simply removing the class does not.
I don't want to remove the DOM elements completely because in the live app
they contain form fields that, when submitted, remove the record for that
element from the DB.
Is there something I'm missing?