jQuery addClass example

Change class name on click in jQuery

by Shanna Barnard

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Add / Remove Table Rows Dynamically</title>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

</head>
<body>
    <table>

        <tbody>
            <tr>
                <td><button type="button" class="delete">Delete Row</button></td>
                <td>Peter Parker</td>
                <td>[email protected]</td>
            </tr>
        </tbody>
    </table>
    <input type="button" class="add" value="Add Row">
</body> 
</html>

CSS

form{
        margin: 20px 0;
    }
    form input, button{
        padding: 5px;
    }
    table{
        width: 100%;
        margin-bottom: 20px;
		border-collapse: collapse;
    }
    table, th, td{
        border: 1px solid #cdcdcd;
    }
    table th, table td{
        padding: 10px;
        text-align: left;
    }

JavaScript

$(document).ready(function(){
        $(".add").click(function(){
            var markup = "<tr>new</tr>";
            $("table tbody").append(markup);
        });
        
        // Find and remove selected table rows
        $(".delete").click(function(){
            $("table tbody").find('input[name="record"]').each(function(){
            	if($(this).is(":checked")){
                    $(this).parents("tr").remove();
                }
            });
        });
    });