CSS nth-child not refreshing after class change

I have a table with alternate background colored rows. I use a very simple javascript for table filtering. I am using tailwind css.

Now when I change the classes using javascript, it updates the visibility of rows as it was expected but it doesn't update the background color of the rows.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

document.getElementById("table-search").addEventListener('input', updatetable, false);


var table = document.getElementById("data-table-body");
var select = document.getElementById("tablefilter");

function updatetable()
{
    var search = '';
    search = document.getElementById("table-search").value;
    search = search.toLowerCase();
    console.log(search + "\n" + select.value);

    var rows  = table.getElementsByTagName("tr");

    var row;
    var txtvalue = '';

    for (var i in rows)
    {
        row = rows[i];
        
        if (select.value == 'name') {
            txtvalue = row.getElementsByTagName("th")[0].textContent || row.getElementsByTagName("th")[0].innerText;
            console.log(txtvalue);
            if (txtvalue.toLowerCase().includes(search)) {
                if (row.classList.contains("table-row-hide")) {
                    row.classList.remove("table-row-hide");
                    row.classList.add("table-row-show");
                }
            }
            else
            {
                if (row.classList.contains("table-row-show")) {
                    row.classList.remove("table-row-show");
                    row.classList.add("table-row-hide");
                }
            }
        }
    }
}

<!-- language: lang-css -->

.table-row-show:nth-child(odd)
{
    @apply bg-white dark:bg-gray-900;
}

.table-row-show:nth-child(even)
{
    @apply bg-gray-50 dark:bg-gray-800;
}

.table-row-hide
{
    display: none;
}

<!-- end snippet -->

Setting an element to display: none stops it from rendering. It does not remove it from the DOM.

A table body containing three rows contains three rows. If the second row is display: none then the third row is still the third row.

You can't use nth-child to select elements based on what other elements are visible. You'd need to use some other approach (such as class names applied to every visible row).