使用 jquery 删除行时，nth-child css 不会重绘答案

【问题标题】：nth-child css doesn't redraw when removing a row with jquery使用 jquery 删除行时，nth-child css 不会重绘
【发布时间】：2014-03-17 21:45:19
【问题描述】：

我有一个在这里演示问题的 jsfiddle：http://jsfiddle.net/xjmwY/

基本上，我有一个使用 nth-child(odd) 规则的 css3 斑马条纹表。

.myTable tr {
    background-color: #efefef;
}
.myTable  tr:nth-child(odd) {
    background-color: #fff;
}

当通过 jquery 删除一行时，我会得到两个相同颜色的后续行。有没有办法让桌子重新粉刷？

【问题讨论】：

您是否也尝试过将 css 与 jQuery 一起应用？或者，您需要重新加载页面的一部分。
$("#row_2").fadeOut();是你的问题。使用 .remove()

标签： javascript jquery css css-selectors

【解决方案1】：

.fadeOut() 只是隐藏该行（将其淡化为透明，然后将显示设置为无），但并没有真正删除它。为此，请使用 .remove():

$("tr").click(function(event) {
  event.preventDefault();
  $("#row_2").remove();
});

jsFiddle example

如果删除行不是一个选项，您可以按可见的行和不可见的行来过滤行：

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

【讨论】：

【解决方案2】：

这是因为您实际上并没有删除该行，而只是隐藏了它。

如果您想要更新样式，您需要在 fadeOut() 完成后从 DOM 中实际删除该行。

根据您对隐藏行的实际操作，将其从 DOM 中移除可能不是一种选择——例如，如果您想稍后再将其切换回来。

如果是这种情况，另一种解决方案可能是插入一个额外的隐藏行。这会使它重新进入奇/偶同步，而不会删除您隐藏的行。当您重新显示隐藏的行时，您可以再次删除多余的行。

【讨论】：

【解决方案3】：

如果您想为前端用户的快乐保持淡入淡出的优雅，然后顺利移除，当然您可以使用这样的回调移除链接淡出：

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

【讨论】：