Dynamic zebra table issue

by codepo8

HTML

<button>remove row 3</button>
<table>
    <tbody>
        <tr><td>0</td></tr>
        <tr><td>1</td></tr>
        <tr><td>2</td></tr>
        <tr><td>3</td></tr>
        <tr><td>4</td></tr>
        <tr><td>5</td></tr>
        <tr><td>6</td></tr>
        <tr><td>7</td></tr>
        <tr><td>8</td></tr>
        <tr><td>9</td></tr>
    </tbody>
</table>

CSS

table {width: 100%;}
tr:nth-child(even) {
    background: peachpuff;
}
.hidden {
   display: none;
}

JavaScript

var rows = document.querySelectorAll('tr');
document.querySelector('button').addEventListener('click', function(ev) {
  rows[3].className = 'hidden';
}, false);