无法从待办事项列表中删除 li

我正在创建一个待办事项列表应用程序，当用户单击他/她创建的待办事项时，我希望将其删除。但我测试的时候并没有删除。

$(document).ready(() => 
{
    $(".input input").on("keypress", check_todo);
    $(".output ul li").on("click", "li", delete_todo);
})

let check_todo = (e) => 
{
    if(e.keyCode == 13) 
    {
        if($(".input input").val() == "") 
        {
            no_todo();
        } 
        else 
        {
            add_todo();
        }
    }
}

let delete_todo = () => 
{
    $(this).parent().remove();
}

let add_todo = () => 
{
    let todo = $(".input input").val();

    $(".output ul").append(`<li>${todo}</li>`);
    $(".input input").val("");
}

let no_todo = () => 
{
    alert("Please add a new todo");
}

查看 HTML 和演示 http://codepen.io/thejseffect/pen/gLyBLQ?editors=0010

两个变化。

First,

$(".output ul li").on("click", "li", delete_todo);

应该...

$(".output").on("click", "li", delete_todo);

您需要绑定click事件至.output而不是一个li，因为li创建该事件时元素尚不存在。另外，前面的代码正在寻找对li那是一个孩子.output ul li.

Second,

let delete_todo = () => {
    $(this).parent().remove();
}

应该...

let delete_todo = (e) => {
    e.target.remove();
}

的背景$(this)可以在点击事件本身中工作，但不能像这样从它调用的函数。