I have a jsfiddle that demonstrates the problem here: /

Basically, I have a css3 zebra-striped table using an nth-child(odd) rule.

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

When a row is removed via jquery, I end up with two subsequent rows that are the same color. Is there any way to get the table to repaint?

I have a jsfiddle that demonstrates the problem here: http://jsfiddle/xjmwY/

Basically, I have a css3 zebra-striped table using an nth-child(odd) rule.

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

When a row is removed via jquery, I end up with two subsequent rows that are the same color. Is there any way to get the table to repaint?

• javascript
• jquery
• css
• css-selectors

• Have you tried applying the css with jQuery as well? Alternatively you needed to reload part of the page. – Severin Commented Sep 6, 2013 at 19:55
• $("#row_2").fadeOut(); is your problem. Use .remove() – Milche Patern Commented Sep 6, 2013 at 19:56

3 Answers 3

.fadeOut() just hides the row (fades it to transparent then sets the display to none), but it doesn't really remove it. To do that use .remove():

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

jsFiddle example

If removing the row isn't an option, you can filter the rows by those that are visible and those that aren't like:

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

This is because you're not actually removing the row, you're just hiding it.

If you want the styling to update you'll need to actually remove the row from the DOM after the fadeOut() has pleted.

Depending on what you're actually doing with the hidden row removing it from the DOM may not be an option -- eg maybe if you want to toggle it back in again later.

If that's the case, an alternative solution might be to insert an extra hidden row instead. That would put it back into odd/even sync without removing the row you're hiding. You can then remove the extra row again when you re-display the hidden row.

If you want to keep the grace of a fade for your front end users hapiness and then smoothly have that remove, of course you can chain the fadeout with a callback remove like this:

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