JS移除类后，类型为的CSS第n个未更新

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

本文关键字：CSS 更新 类型 JS      更新时间：2023-09-26

我创建了以下的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元素，因为在实时应用程序中，它们包含表单字段，当提交时，会从DB中删除该元素的记录。

我有什么东西不见了吗？

编辑：作为一个快速而肮脏的解决方案，我最终只是将"已删除"的项目移到了组的底部：http://jsfiddle.net/qTLmV/2/

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

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

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