Question

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

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

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

我遇到一个问题，当点击垃圾桶图标时，它会删除此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();
    });
});

我的问题是：如何只删除单击垃圾图标的一个Li元素，而不是后来创建的所有Li元素（包括一个）？

非常感谢你的帮助。

Answer 1

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

或甚至使用event delegation

将其分配为附加到所有未来的垃圾桶图标

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

其中listContainer是UL的ID

Answer 2

移除已点击的li中最近的ion-trash-b，并且由于您的元素是动态生成的，因此请使用event delegation进行ion-trash-b点击事件，如下所示。

$('#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');        
});

$('body').on('click', '.ion-trash-b', function () {
    $(this).closest('li').remove();
});

删除这个，只有这个元素jQuery

2 个答案: