为什么我的jQuery附加div会在点击时删除？

Question

使用jQuery创建一个带有html内容的tr，包括一个保存自己移除键的按钮。

＆＃13;

＆＃13;

$(document).ready(function(){
  $(".btn-add").click(function(){
    $('#revenue').append("<tr><td><div class='input' id='test'><p>[Item]</p></div></td><td><div id='room1' class='revenue-input'><input type='number' min='0' id='room1rev' size='1' placeholder='0'></div></td><td><button class='btn-del'>-</button></td></tr>");
  });
});

＆＃13;

＆＃13;

＆＃13;

然后当点击tr上的那个按钮（由.btn-add点击生成）时，它不起作用。它无法删除包含其中所有html的tr。

＆＃13;

＆＃13;

$(document).ready(function() {
  $('.btn-del').click(function() {
    $(this).closest('tr').remove()
  });
});

＆＃13;

＆＃13;

＆＃13;