Dynamic zebra table issue

by Jens Grochtdreis

HTML

<button>remove row </button>
<table>
<tr><td>one</td></tr>
<tr><td>two</td></tr>
<tr><td>three</td></tr>
<tr><td>four</td></tr>
<tr><td>five</td></tr>
<tr><td>six</td></tr>
<tr><td>seven</td></tr>
<tr><td>eight</td></tr>
<tr><td>nine</td></tr>
<tr><td>ten</td></tr>
<tr><td>eleven</td></tr>

</table>

CSS

h1{font-size: 20px;}
table {width: 100%;}
ul {list-style-type: none;}
tr{ height: 2em; border: 1px solid black; }

tr, 
tr.hidden:nth-child(even) + tr:nth-of-type(odd) + tr:nth-of-type(even),
tr.hidden:nth-child(even) + tr.hidden:nth-child(odd) ~ tr:nth-of-type(odd) {
    background: khaki;     
}

tr:nth-child(even),
tr.hidden:nth-child(even) ~ tr:nth-of-type(odd), 
tr.hidden:nth-child(even) + tr.hidden:nth-child(odd) ~ tr:nth-of-type(even) { 
    background: indianred; 
}
.hidden { display: none; }

JavaScript

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