javascript - 删除这个并且只删除这个元素 jQuery

Question

我正在创建一个动态任务列表，这些任务会在写入输入且输入长度小于或等于 30 个字符并按下按钮后显示。

与任务一起创建了一个垃圾桶图标。

我想让用户在单击来自外部库 ionicons 的图标时删除所选任务。

我遇到一个问题，当单击垃圾桶图标时，它会删除此 Li 以及单击 Li 后创建的所有 Li 元素。

我正在将 li 元素添加到列表中。

这是片段:

$('#addNewTaskBtn').click(function () {
    var inputText = $('#dayTask').val();
    var trashIcon = '<i class="ion-trash-b"></i>';
    var newTask = $('<li />', { html: inputText + " " + trashIcon });

    //  clearing the input after click
    $('#dayTask').val('');

    if (inputText.length && inputText.length <= 30)
        $(newTask).prependTo('ul.dayList');

    $('.ion-trash-b').click(function () {
        $(newTask).remove();
    });
});

我的问题是: 如何只删除点击垃圾桶图标的一个李元素，而不删除后来创建的所有李元素(包括那个)？

非常感谢您的帮助。

Answer 1

$('.ion-trash-b').click(function(){
  $(this).parent().remove(); // or $(this).closest("li").remove();
});

或者甚至使用 event delegation 将其指定为 onload 以附加到所有 future 的垃圾图标

$(function() {
  $("#listContainer").on("click",".ion-trash-b",function(){
    $(this).parent().remove();// or $(this).closest("li").remove();
  });
});

其中listContainer是UL的ID