3

我已经创建了下面的这个 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/

4

2 回答 2

4

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

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

于 2013-08-15T05:13:44.430 回答
-1 
$(document).on("click", "a", function(event) {
    var container = $(this).parent();
    $(this).remove();
    container.remove();    
});
于 2013-08-15T05:19:47.907 回答