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

我是一名学习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);

}); 

---

})

请提供一把合适的小提琴…我认为你的电话和电子邮件不正确。它应该是输入[name=phone]和输入[name=email]。除此之外，您可能需要将代码放入JSFIDLE示例中。我还建议使用Firefox和FireBug插件，这样你就可以中断javascript.woops了，哈哈。我已经解决了这个问题，但是我仍然有前面描述的问题，你的引号正在相互抵消-使用单引号或转义你的双引号OK…我只是使用了转义字符，这很有效，但是现在行被添加，一秒钟后它被删除。很抱歉让我感到痛苦，但我对网页设计还不熟悉，花了好几个小时盯着同样的东西看，这让我很沮丧。