Resetting zebra style after removing rows from table

Question

I have a table that, with bootstrap, uses :nth-child to style alternating table rows. However, whenever I remove a row with jQuery .hide() the alternating rows break.

HTML:

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<table id='t1' class="table table-bordered table-striped table-condensed table-hover table-even-widths">
    <thead>
        <tr>
            <th>Heading A</th>
            <th>Heading B</th>
            <th>Heading C</th>
        </tr>
    </thead>
    <tbody>
        <tr id='r1'>
            <td>0</td>
            <td>b</td>
            <td>c</td>
        </tr>
        <tr id='r2'>
            <td>1</td>
            <td>b</td>
            <td>c</td>
        </tr>
        <tr id='r3'>
            <td>2</td>
            <td>b</td>
            <td>c</td>
        </tr>
        <tr id='r4'>
            <td>3</td>
            <td>b</td>
            <td>c</td>
        </tr>
        <tr id='r5'>
            <td>4</td>
            <td>b</td>
            <td>c</td>
        </tr>
    </tbody>
</table>

JS:

$('#r4').hide();

http://jsfiddle.net/saznq/1/

I was wondering if there was an easy way to sort of reset the table with the new configuration. I can always make my own .even and .odd class and filter through the table after every update to remove and reapply the classes, but was hoping for a more elegant solution.

Answer 1

Aside from $('#r4').remove();, you could use something like this:

$('#r4').after('<tr></tr>').hide();

jsFiddle example

This hides the element, and adds an empty <tr> element after it, displacing its removal and thereby doesn't disturb the :nth-child styling.