javascript - JS 删除类后 CSS nth-of-type 不更新

Question

我创建了以下的 JSFiddle:http://jsfiddle.net/qTLmV/

这是我正在使用的 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>

JS

$(document).on("click", "a", function(event) {
  var container = $(this).parent();
  container.hide();
  container.removeClass("active");
  //container.remove();
  return event.preventDefault();
});

我想做的是，如果单击任何“删除”链接，它们应该被隐藏，删除它们的“事件”类并且交替背景颜色应该保持一致。但是，我无法使它正常工作。如果我完全删除 DOM 元素，它会起作用，但简单地删除类不会。

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

有什么我想念的吗？

编辑:作为一个快速而肮脏的解决方案，我最终只是将“已删除”的元素移动到组的底部:http://jsfiddle.net/qTLmV/2/

Answer 1

:nth-of-type() 不看类，只看元素类型。 .addable-group 的所有子元素都是 div 元素，无论您是否在其中一个元素上拥有 .active 类都没有关系改变它是 .addable-group 的第 n 个 div 子元素的事实。

如果您只需要根据 .active 类来设置这些元素的样式，恐怕您将需要使用 JS 应用不同的类并改为使用该类的样式。