Question

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

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

See the HTML and a demo

Answer 1

两处变化。

<强>首先，

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

应该......

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

您需要将click事件绑定到.output而不是li，因为创建该事件时li元素尚不存在。此外，之前的代码正在寻找点击li的{{1}}的孩子。

<强>其次，

.output ul li

应该......

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

let delete_todo = (e) => { e.target.remove(); }的上下文可以在click事件本身中起作用，但不会像这样从它调用函数。

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

1 个答案: