无法使用jQuery删除动态添加的列表元素

Question

我正在开发一个应用程序，我需要从UI动态添加用户，并在需要时删除它们。

添加用户工作正常，但删除我发现很难。我试图在jsfiddle.net https://jsfiddle.net/ce236Lf3/

中重新创建场景

代码

<input type="text" class="txtadd">
<button class="btnadd">
Add
</button>

<ul class="items">

</ul>

ul{
  list-style:none;
}

.del{
  cursor:pointer;
}

$(document).ready(function(){
$('.btnadd').click(function(e){
    var txt=$('.txtadd').val();
  $('.items').append('<li class=\'listItem\'>'+txt+'<img src=\'http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/16/Actions-edit-delete-icon.png\' class=\'del\'></li>');
  $('.txtadd').val('');
});

$('.del').on('click',function(e){
    alert('hi');
  $('this').remove();
});
})