JSFiddle - React, Tailwind, and code Playground

by emturano

HTML

<div id="empty_items">Click to hide</div>

<table>
    <tr class="todo-list">
        <td class="todo-assigned">CONTENT!</td>
    </tr>
    <tr class="todo-list">
        <td class="todo-assigned"></td>
    </tr>
    <tr class="todo-list">
        <td class="todo-assigned">CONTENT!</td>
    </tr>
    <tr class="todo-list">
        <td class="todo-assigned"></td>
    </tr>
</table>

CSS

.todo-list td {
    background: rgb(200, 255, 200);
    padding: 20px;
}

.active td {
    background: rgb(255, 200, 200);
}

.todo-assigned-empty {
    display: none;
}

JavaScript

$('#empty_items').on("click", function(e) {
				$('.todo-list:has(> .todo-assigned:parent)').toggleClass('todo-assigned-empty');
			});