.remove()函数在jquery中不起作用

我想删除动态添加的div及其不起作用的部分。我尝试了所有的技术，但并不能解决这个问题。

var date = document.querySelector("#heading > h1");
var today = new Date();
var options = {
weekday: "long",
day: "numeric",
month: "long"
};
var day = today.toLocaleDateString("en-US", options);
date.innerHTML = day;

$("#newItem").click(function(){
var text = $("#itemAdder > input").val();
$("#itemAdder").before('<div class="item"><input type="checkbox"><p>' + text +'</p><span class="material-icons md-18 toDelete">delete</span></div>');
$("#itemAdder > input").val("");
});
$("span").on("click", function() {
$(this).find(".item").remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box" id="heading">
<h1></h1>
</div>
<div class="box">
<div class="item">
<input type="checkbox">
<p>Hello World</p>
<span class="material-icons md-18 toDelete">delete</span>
</div>

<div class="item" id="itemAdder">
<input type="text" placeholder="New Item" autocomplete="off">
<button id="newItem">+</button>
</div>
</div>
<br/>