jQuery – Add Delete rows from table

Sometimes we need to work on client side to create some objects on the page and then send them to server side at the last. jQuery have many in-built functions to perform this.

Create a table html structure on the page with id on tbody and also a form with input fields. We are creating three input fields and obviously three columns on the table. This form would have an add button, on the click event of that button we will add a row on our tbody.

While creating row into table we will add a delete button with click event. On the click event of that delete button we will delete particular row on the basis on that button element.

<h3>Employees</h3>
<div class="row">
    <div class="col-md-5">
        <table class="table table-responsive" width="100%">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Post</th>
                    <th>Location</th>
                    <th></th>
                </tr>
            </thead>
            <tbody id="tblEmployees">
            </tbody>
        </table>
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-3">
                <label>Name</label>
            </div>
            <div class="col-md-9">
                <input id="inputName" class="form-control" />
            </div>
        </div>
        <div class="row mt-1">
            <div class="col-md-3">
                <label>Post</label>
            </div>
            <div class="col-md-9">
                <input id="inputPost" class="form-control" />
            </div>
        </div>
        <div class="row mt-1">
            <div class="col-md-3">
                <label>Location</label>
            </div>
            <div class="col-md-9">
                <input id="inputLocation" class="form-control" />
            </div>
        </div>
        <div class="row mt-1">
            <div class="col-md-12">
                <a class="btn btn-primary" id="btnAddEmployee" style="float:right;">Add</a>
            </div>
        </div>
    </div>
</div>

Below is our add button click event:

$('#btnAddEmployee').click(function () {
        var name = $('#inputName').val();
        var post = $('#inputPost').val();
        var location = $('#inputLocation').val();
        var employeeHtml = '<tr>';
        employeeHtml += '<td>' + name + '</td>';
        employeeHtml += '<td>' + post + '</td>';
        employeeHtml += '<td>' + location + '</td>';
        employeeHtml += '<td><a class="btn btn-danger" onClick="deleteEmployee(this)">X</a></td>';
        employeeHtml += '</tr>';
        $('#tblEmployees').append(employeeHtml);
        clearInputs();
});

When you look out the code there is a variable employeeHtml, we are appending each time. Actually we are creating our html in pieces so that one can understand easily. We can do it in a single line but after that another user or even you also need to understand that completely that what html is creating by this.

At the last of this event we are calling a function clearInputs(), this function will set empty to all input fields, so that user can add another row without clearing itself.

function clearInputs() {
    $('#inputName').val('');
    $('#inputPost').val('');
    $('#inputLocation').val('');
}

Run the application and fill the values then click on add button, it will add a row on above table and also cleared the input values. You can add as many rows as you want. Our table is above the form so after entering some employees our form will go down. Keep that form on top and table under that so that our form will not move, only table rows will insert after last row.

function deleteEmployee(btn) {
    $(btn).parent().parent().remove();

On the delete event we are passing the button element and need to remove only the parent tr of that button. We know the hierarchy of this table that’s why we use parent of parent element to be removed. Otherwise we have to use find method with id of our tr element and then remove function.

To validate this entry just check the inserted value is empty or not and perform accordingly.

$('#btnAddEmployee').click(function () {
        var name = $('#inputName').val();
        var post = $('#inputPost').val();
        var location = $('#inputLocation').val();
        if (name == '')
            alert('Name is mandatory.');
        else {
            var employeeHtml = '<tr>';
            employeeHtml += '<td>' + name + '</td>';
            employeeHtml += '<td>' + post + '</td>';
            employeeHtml += '<td>' + location + '</td>';
            employeeHtml += '<td><a class="btn btn-danger" onClick="deleteEmployee(this)">X</a></td>';
            employeeHtml += '</tr>';
            $('#tblEmployees').append(employeeHtml);
            clearInputs();
        }
});

We are using append function here, append add provided html just after existing html end in particular selector. To add each row after current rows we have to use this and if you want to add new row on top then we can use prepend function.

If you want more validation then we can add those with our existing condition. In next post we will use an update button with each row and update the row with newly inserted values.