Javascript 第n个子css不'；使用jquery删除行时不重新绘制

我有一个JSFIDLE在这里演示了这个问题：

基本上，我有一个css3斑马条纹表，使用第n个孩子（奇数）规则

当通过jquery删除一行时，我将得到两个颜色相同的后续行。有没有办法让表格重新绘制？

.fadeOut（）

只是隐藏该行（将其淡入透明状态，然后将显示设置为无），但它并没有真正删除该行。为此，请使用

.remove（）

：

如果不选择删除行，则可以按可见行和不可见行筛选行：

$("#row_2").fadeOut(function () {
    $('tr:visible').filter(":odd").css('background', '#fff');
});

---

这是因为您实际上并没有删除该行，而是将其隐藏起来

如果希望更新样式，则需要在

fadeOut（）

完成后从DOM中实际删除该行

根据您对隐藏行的实际操作，将其从DOM中删除可能不是一个选项——例如，如果您希望稍后再次切换回隐藏行，则可能不是一个选项

---

如果是这种情况，另一种解决方案可能是插入一个额外的隐藏行。这将使其恢复奇偶同步，而不删除隐藏的行。然后，当重新显示隐藏行时，您可以再次删除额外的行。

如果您希望为前端用户保持淡入淡出的优雅，然后平滑地删除，当然您可以使用回调删除链接淡出，如下所示：

<table class="myTable">
    <tr>
        <td>
            Bla bla :) I'm so striped <removebutton>Remove this row</removebutton>
        </td>
    </tr>
    <tr>
        <td>
            Bla bla :) I'm so striped  <removebutton>Remove this row</removebutton>
        </td>
    </tr>
    <tr>
        <td>
            Bla bla :) I'm so striped  <removebutton>Remove this row</removebutton>
        </td>
    </tr>
</table>

<script>
    jQuery('.myTable tr td removebutton').on('click', function() {
        jQuery(this).parent().parent().fadeOut(function() { 
            jQuery(this).remove();
       });
    });
</script>
<style>
    .myTable tr:nth-child(odd) {
        background-color: #EEEEEE; 
    }
</style>

布拉布拉：）我太累了，把这一排拿走
布拉布拉：）我太累了，把这一排拿走
布拉布拉：）我太累了，把这一排拿走
jQuery（'.myTable tr td removebutton'）。在（'click'，function（）上{
jQuery（this）.parent（）.parent（）.fadeOut（函数（）{
jQuery（this.remove（）；
});
});
.myTable tr:n个孩子（奇数）{
背景色：#EEEEEE；
}

您是否也尝试过将css应用于jQuery？或者，您需要重新加载部分页面。$（“#row_2”）.fadeOut（）；这是你的问题。Use.remove（）

$("#row_2").fadeOut(function () {
    $('tr:visible').filter(":odd").css('background', '#fff');
});

<table class="myTable">
    <tr>
        <td>
            Bla bla :) I'm so striped <removebutton>Remove this row</removebutton>
        </td>
    </tr>
    <tr>
        <td>
            Bla bla :) I'm so striped  <removebutton>Remove this row</removebutton>
        </td>
    </tr>
    <tr>
        <td>
            Bla bla :) I'm so striped  <removebutton>Remove this row</removebutton>
        </td>
    </tr>
</table>

<script>
    jQuery('.myTable tr td removebutton').on('click', function() {
        jQuery(this).parent().parent().fadeOut(function() { 
            jQuery(this).remove();
       });
    });
</script>
<style>
    .myTable tr:nth-child(odd) {
        background-color: #EEEEEE; 
    }
</style>