JSFiddle - React, Tailwind, and code Playground

by vasantharaj

HTML

<script src="&lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css&quot;&gt;"></script>
  <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

$('.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>');
    }
});

$('span.glyphicon-trash').on('click', function() {
    $(this).closest('tr').remove();
});