JSFiddle - React, Tailwind, and code Playground

by Ajsa Ferguson

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<table class="table table-striped table-bordered table-hover table-condensed tableSiteUser">
    <thead>
        <tr>
            <th>#</th>
            <th>User</th>
            <th>Channel</th>
            <th>Action</th>
        </tr>
        <tr>
            <td contentEditable="true">1</td>
            <td contentEditable="true">www.google.com</td>
            <td contentEditable="true">channel-1</td>
            <td contentEditable="true"><span class="glyphicon glyphicon-trash form-control row-remover">delete</span>
            </td>
        </tr>
    </thead>
    <tbody id="site-table-body"></tbody>
</table>

JavaScript

(function () {
    $('.table tbody').append('<tr><td contenteditable="true">1</td><td contenteditable="true">1</td><td contenteditable="true">1</td><td contenteditable="true"><span class="glyphicon glyphicon-trash form-control row-remover">del</span></td></tr>');
    $('.table').on('keydown', 'td:last-child', function (e) {
        var keyCode = e.keyCode || e.which;

        if (keyCode == 9) {
            $('tbody').append('<tr><td contenteditable="true">2</td><td contenteditable="true">2</td><td contenteditable="true">2</td><td contenteditable="true"><span class="glyphicon glyphicon-trash form-control row-remover">del</span></td></tr>');
        }
    });
})();

(function () {
    "use strict";
    var tbodies = document.getElementsByTagName('tbody'), tbody;
    for (var i = 0; tbody = tbodies[i]; i++) {
        tbody.addEventListener('click', function (e) {
            if (e.target.className.indexOf('row-remover') >= 0) {
                e.target.parentElement.parentElement.remove();
            }
        }, false);
    }
})();