无法从待办事项列表中删除李 [英] Can't delete li from to-do list

问题描述

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

  $（document）.ready（（）=> $ （keypress，check_todo）; 
 $（。input 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（请添加新的待办事项）; 
} 
  

查看HTML和演示

第一，

  $（。output ul li）。on（click，li，delete_todo）; 
  

应该是......

<$ p $ （click，li，delete_todo）;

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

第二，

  let delete_todo = （）=> {
 $（this）.parent（）。remove（）; 
} 
  

应该是......

  let delete_todo =（e）=> {
 e.target.remove（）; 
 
  

$（this）可以在click事件本身中工作，但不是像这样被调用的函数。

I'm creating a to-do list application, and when the user clicks on a to-do that he/she has created, I want it to delete. But when I tested it out, it didn't delete.

$(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

解决方案

Two changes.

First,

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

Should be...

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

You need to bind the click event to .output rather than an li, because the li elements don't exist yet when that event is created. Also, the previous code was looking for a click on an li that was a child of .output ul li.

Second,

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

Should be...

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

The context of $(this) would work in the click event itself, but not a function being called from it like this.

这篇关于无法从待办事项列表中删除李的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！