Javascript JS删除类后类型的CSS第n个未更新

我创建了以下JSFIDLE：

以下是我正在使用的CSS：

.nested > .addable-group > div.active:nth-of-type(even) {
  background: blue;
}

.nested > .addable-group > div.active:nth-of-type(odd) {
  background: grey;
}

简化布局：

<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>

我想做的是，如果单击任何“删除”链接，它们应该被隐藏，删除它们的“活动”类，并且交替的背景颜色应该保持一致。然而，我一直没能让它工作。如果我完全删除DOM元素，它就可以工作，但是简单地删除类就不行了

我不想完全删除DOM元素，因为在live应用程序中，它们包含表单字段，提交时会从DB中删除该元素的记录

有什么我遗漏的吗

编辑：作为一个快速而肮脏的解决方案，我最终只是将“已删除”项移动到组的底部：

：nth-of-type（）

不查看类，它只查看元素类型。

.addable group

的所有子元素都是

div

元素，无论其中一个元素上是否有

.active

类，都不会改变它是

可添加组的第n个
div
子元素的事实

如果只需要根据
.active
类设置这些元素的样式，我担心您需要使用JS应用另一个类，而不是该类的样式。
我更希望交替背景颜色能够轻松处理，而不是使用JS添加/删除类以获得准确的颜色。是否有其他选择器或方法纯粹使用CSS来实现这一点，或者我被降级为JS解决方案？@greetification:那么您可能运气不好，因为这根本不是
：nth-of-type（）
选择器的工作方式。我知道没有其他的纯CSS解决方案（除非你愿意尝试使用渐变，但我没有太多的经验）。是的，这会起作用，但我不想完全删除DOM元素，因为在live app中，它包含需要处理以删除的表单对象。
$(document).on("click", "a", function(event) {
    var container = $(this).parent();
    $(this).remove();
    container.remove();    
});

$(document).on("click", "a", function(event) {
    var container = $(this).parent();
    $(this).remove();
    container.remove();    
});