JSFiddle - React, Tailwind, and code Playground

by bmarsh123

HTML

<div>
    <input type="button" id="addRow" value="Add Row" />
</div>
<div>
    <table id="tbl">
        <thead>
            <tr>
                <th style="width: 25%;">First</th>
                <th style="width: 25%;">Last</th>
                <th style="width: 10%;"></th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>
<div>
    <table id="tbl2">
        <thead>
            <tr>
                <th style="width: 25%;">First</th>
                <th style="width: 25%;">Last</th>
                <th style="width: 10%;"></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><label>John</label></td>
                <td><label>Johnson</label></td>
                <td><a class="rem2">Remove</a></td>
            </tr>
            <tr>
                <td><label>Billy</label></td>
                <td><label>Bob</label></td>
                <td><a class="rem2">Remove</a></td>
            </tr>
            <tr>
                <td><label>Willy</label></td>
                <td><label>Wilson</label></td>
                <td><a class="rem2">Remove</a></td>
            </tr>
        </tbody>
    </table>
</div>

CSS

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 50%;
}
th { background-color: #eee; }
th, td { border: 1px solid #111; margin: 0; }
div { margin: 10px 10px; }
.rem, .rem2 { color: blue; cursor: pointer; }
.rem:hover, .rem2:hover { text-decoration: underline; }
#tbl2 { margin-top: 60px; }

JavaScript

var i = 0;
var i2;
$('#addRow').click(function(e) {
    i2 = i;
    i = i2 + 1;
    $('#tbl').find('tbody')
        .append($('<tr>')
            .append($('<td>')
                .append($('<label>')
                    .html('Foo ' + i)))
            .append($('<td>')
                    .append($('<label>')
                        .html('Bar ' + i)))
            .append($('<td>')
                .attr('style', 'text-align: center')
                .append($('<a>')
                    .attr('class', 'rem')
                    .text('Remove')
                    )
               )
           );
});

$('#tbl').on('click', '.rem', function() {
    alert('tbl .on click .rem');
    $(this).closest('tr').remove();
});
$('.rem').click(function() {
    alert('.rem click');
    $(this).closest('tr').remove();
});

// Remove rows from second table
$('.rem2').click(function() {
    $(this).closest('tr').remove();
});