JSFiddle - React, Tailwind, and code Playground

by chovy

HTML

<table>
    <tbody></tbody>
</table>

<a href="#" class="add">add rows</a><br>
<a href="#" class="remove">remove rows</a>

CSS

tbody {
    position: relative;
    width: 200px;
    border: 1px solid black;
}

tbody:empty:before {
    content: 'empty';
    position: absolute;
    top: 50%;
    left: 50%;
}

JavaScript

$(".add").click(function(e){
    e.preventDefault();
    var row = '<tr><td>stuff</td></tr>';
    
    for ( var i=0, l=10; i<l; i++) {
    $("tbody").append(row)
    }    
});

$(".remove").click(function(e){
    e.preventDefault();
    
    $.each($("tr"), function(i, tr){
        $(tr).fadeOut(function(){
            $(this).remove();
        });
    });
});