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

* {
    margin: 0;
    padding: 0;
}
table {
    padding: 0;
    margin: 0;
    border: none;
    width: 100%;
   background-image:
  repeating-linear-gradient(white, white 1.2em, hotpink 1.2em, hotpink 2.4em);
    border-collapse: collapse;

}
td,tr {
    border: none;
padding: 0 5px;
    line-height: 1.2em;
    margin: 0;
    border-collapse: collapse;
}
.hidden {
   display: none;
}

JavaScript

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