Why won't my jQuery appended div remove on click?

Question

Using jQuery to create a tr with html content, including a button that holds the key to its own removal.

$(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>");
  });
});

Then when that button on the tr (generated by the .btn-add click) is clicked it doesn't work. It fails to remove the tr with all the html inside it.

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