仅在列表中第一次删除列表中的第一个

Question

I have a list of results, and I want to pop the most recent one with a button click like this:

//clear most recent
$('#clear-most-recent').on('click', function () {
  $('#output').children().first().hide(800).done().remove();
});

but it only works the first time. The error is uncaught TypeError, ...is not a function . I'm guessing each subsequent call tries to access the now-removed element.

1. So the handler function isn't chucked out and re-created for each call, right?
2. How can I get the jquery set to update its' contents each time around?

link to project on jsbin (be warned, its ugly): https://jsbin.com/lodobaj/edit?html,output

Answer 1

Use callback function to remove:

$('#clear-most-recent').on('click', function () {
   $('#output').children().first().hide(800, function(){
     $(this).remove();
   });
});