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

Remove this and only this element jQuery

本文关键字：删除 元素 jQuery      更新时间：2023-09-26

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

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

我想使用户能够在单击来自外部库ionicon的图标时删除所选任务。

我有一个问题，当单击垃圾桶图标时，它会删除此 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 元素（包括一个）？

非常感谢您的帮助。

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

甚至使用事件委派将其分配给加载以附加到所有未来的垃圾桶图标

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

其中 listContainer 是 UL 的 ID

删除单击ion-trash-b的最接近li，并在动态生成元素时，对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();
});
相关文章：