<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <Title> add delete records practice </ title> <link rel="stylesheet" type="text/css" href="ex_2_style/css.css" /> </head> <body> <table id="employeeTable"> <tr> <th>Name</th> <th>Email</th> <th>Salary</th> <th> </th> </tr> <tr> <td>Tom</td> <td>[email protected]</td> <td>5000</td> <td><a href="javascript:;" >Delete1</a></td> </tr> <tr> <td>Jerry</td> <td>[email protected]</td> <td>8000</td> <td><a href="javascript:;">Delete2</a></td> </tr> <tr> <td>Bob</td> <td>[email protected]</td> <td>10000</td> <td><a href="javascript:;">Delete3</a></td> </tr> </table> <div id="formDiv"> <H4> Add new employee </ h4> <table> <tr> <td class="word">name: </td> <td class="inp"> <input type="text" name="empName" id="empName" /> </td> </tr> <tr> <td class="word">email: </td> <td class="inp"> <input type="text" name="email" id="email" /> </td> </tr> <tr> <td class="word">salary: </td> <td class="inp"> <input type="text" name="salary" id="salary" /> </td> </tr> <tr> <td colspan="2" align="center"> <button id="addEmpButton" value="abc"> Submit </button> </td> </tr> </table> </div> <script src="jquery-1.10.1.js"></script> <script> $(function () { //Add to $("#addEmpButton").on("click",function () { let $empName = $("#empName").val() let $email = $("#email").val() let $salary = $("#salary").val() $(`<tr> <td>${$empName}</td> <td>${$email}</td> <td>${$salary}</td> <td><a href="javascript:;">Delete3</a></td> </tr>`).appendTo("#employeeTable tbody") $("#empName").val("") $("#email").val("") $("#salary").val("") }) //delete $("#employeeTable").on("click","a",function () { $(this).parents("tr").remove() }) }) </script> </body> </html>