JavaScript（jQuery）で動的に追加した要素をフェードアウトしてから削除する方法

jQueryで動的に追加した要素をフェードアウトしてから削除する方法

　JavaScriptで動的に追加したDOM要素は通常の方法ではイベントが起こらなくなる。
そこでdocumentを使ってHTML読み込み完了後にイベントを発動するよう設定することでイベントが起こる。
　また、queue()を使用することで、フェードアウトを実行してから要素を削除できる。
個人的にかなり躓いた部分なので記録に残します。

  $(document).on('click', 'div', function(){
    $('div').fadeOut(500).queue(function(){
      $(this).remove();
    });
  });