Javascript Ajax jQuery Html PHP Example Quiz New MORE
Need a Website Or Web Application.Contact : +91 9437911966 (Whatsapp) Note: Paid Service

How to Add and remove table row dynamically in jQuery

<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <title>How to add or remove rows in a table dynamically jQuery </title>
    <style type="text/css">
        table {
            width: 100%;
            margin: 20px 0;
            border-collapse: collapse;

        td {
            border: 1px solid #cdcdcd;

        table th,
        table td {
            padding: 5px;
            text-align: left;
    <script src=""></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $(".add-row").click(function() {
                var name = $("#name").val();
                var email = $("#email").val();
                var markup = "<tr><td><input type='checkbox' name='record'></td><td>" + name + "</td><td>" + email + "</td></tr>";
                $("table tbody").append(markup);
            /* Find and remove selected table rows */
            $(".delete-row").click(function() {
                $("table tbody").find('input[name="record"]').each(function() {
                    if ($(this).is(":checked")) {
        <input type="text" id="name" placeholder="Name">
        <input type="text" id="email" placeholder="Email Address">
        <input type="button" class="add-row" value="Add Row">
                <td><input type="checkbox" name="record"></td>
                <td>[email protected]</td>
    <button type="button" class="delete-row">Delete Row</button>

Run it yourself