Entfernen Sie eine Tabellenzeile, aber behalten Sie das CSS alternate Zeilenformat

Question

So habe ich eine Tabelle, die ein alternierendes Format für Zeilen hat (sagen wir grau und weiß). Ich lösche eine Zeile mit der jquery-Funktion tr.remove(), und natürlich ändert sich auch nicht die CSS der Zeilen darüber/darunter, und sie behalten ihre ungeraden/geraden Stile bei. Grundsätzlich:

Before Deletion   After Deletion 

grey     grey 
white     white 
grey     white 
white     grey 
grey 

Gibt es eine Möglichkeit, die Tabelle schnell zu zwingen, die Stile zu "aktualisieren"? Oder muss ich sie manuell mit jquery anwenden?

Vielen Dank!

Answer 1

Also das Styling mit CSS anstatt mit ungeraden/geraden Klassen/Hardcoding-Werten.

document.querySelector("tbody").addEventListener("click", function(e) { 
 
    var td = e.target, 
 
     tr = td.parentNode; 
 
     tr.parentNode.removeChild(tr); 
 
    
 
});

tr:nth-child(even) { 
 
     background-color: #FFF; 
 
    } 
 
    
 
    tr:nth-child(odd) { 
 
     background-color: #CCC; 
 
    }

<table> 
 
    <tbody> 
 
    <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> 
 
    </tbody> 
 
</table>