JQuery动态地追加和删除表中的行

Question

我是一名实习生学习JQuery，并被要求设计一个基本网页，显示员工是否在办公室。数据以员工姓名，是/否按钮（如果员工在办公室）的形式显示在表格中，以及关于员工所在位置的可选说明。用户应该能够添加和删除员工。我成功地从表中删除了员工，但现在我遇到了两个问题。

1）我无法将员工添加到表中

2）当我添加附加代码以添加员工时，我无法再从表中删除员工。

你如何解决这个问题？

$(document).ready(function() {

$(document).on('click', '.del', function() {
    $(this).parent().parent().remove();
});


$('.sub').click(function() {
    var name = $('input[name=name]').val();
    var phone = $('input [name=phone]').val();
    var email = $('input [name=email]').val();

    var modal = "<td><button class=\"del\">X</button><a href=\"#openModal\">"+name + " </a><div id=\"openModal\" class=\"modalDialog\"><div><a href=\"#close\" title=\"Close\" class=\"close\">X</a><h2> " + name + "</h2><p>Phone: " + phone + "</p><p>email: " + email + "</p></div></div></td>";
    var radio = "<td> <input type='radio' id='yes'>Yes<br><input type='radio' id='no' >No</td>";
    var textArea = "<td><textarea placeholder='Optional Note about where your are, or your schedule'></textarea></td>";

    var tr = "<tr>" + modal + radio + textArea+ "</tr>";
    $('#table').append(tr);

}); 

}）;