Не удается удалить li из списка дел

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) будет работать в самой мыши события, но не функция вызывается из него, как это.