如何从待办事项列表中删除项目

Question

我正在尝试从CodeCademy复制代码来构建待办事项列表，特别是DELETING项目...... 添加项目工作正常，删除项目什么都不做（尽管它在CodeCademy测试窗口中工作正常）。这是从CodeCademy复制的完全相同的代码。

提前致谢！

CODE：

 $(document).ready(function() {
   $('#button').click(function() {
     var toAdd = $('input[name=checkListItem]').val();
     $('.list').append('<div class="item">' + toAdd + '</div>')
   });
   $(document).on('click', '.item', function() {
     $(this).remove();
   });
 });

h2 {
  font-family: arial;
}
form {
  display: inline-block;
}
#button {
  display: inline-block;
  height: 20px;
  width: 70px;
  background-color: #cc0000;
  font-family: arial;
  font-weight: bold;
  color: #ffffff;
  border-radius: 5px;
  text-align: center;
  margin-top: 2px;
}
.list {
  font-family: garamond;
  color: #cc0000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>To Do</h2>
<form name="checkListForm">
  <input type="text" name="checkListItem" />
</form>
<div id="button">Add!</div>
<br/>
<div class="list"></div>