無法從待辦事項列表中刪除李

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的點擊，這是.output ul li的子女。

其次，

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

應該是...

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

的$(this)上下文將在點擊事件本身的工作，但不是一個功能正在從它叫做這樣。