Question: Create a simple "Address Book" which allows the user to record the "first name" and "last name" with an "Add" button. For each record, provide a "Delete" button that allows the user to remove this record.
<html>
<head>
<title> Address Book </title>
<Script src="jquery-1.9.1.min.js"></script>
</head>
<body>
<input type="text" placeholder="Person's First Name" id="first_name"/>
<input type="text" placeholder="Person's Last Name" id="last_name"/>
<input type="button" value="Add" id="addBtn"/>
<table id="addressBook">
</table>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
$("#addBtn").bind('click',function(){
var first_name = $("#first_name").val();
var last_name = $("#last_name").val();
$("#addressBook").append("<tr><td>" + first_name + "</td><td>" + last_name + "</td><td><input type='button' value='Delete' class='deleteBtn' /></td></tr>");
$(".deleteBtn").bind('click',function(){
$(this).parent().closest("tr").remove();
});
});
})
</script>