Почему таск не удаляется в to-do Jquery?

Question

[Nikita_Migushev]

Есть to-do list. В нем есть одна задача прописанная в html.

Кнопка Add Task добавляет новую задачу.

Если нажать на корзину на уже созданной задаче - то она удаляется, все в порядке.

Но если нажать Add Task и нажать на корзину на только что созданной задачи, удаление перестает работать.

В чем проблема?

HTML

<script src="https://kit.fontawesome.com/8e21dede71.js" crossorigin="anonymous"></script>

<ul>
<li>Task 1 <i class="far fa-trash-alt"></i></li>
</ul>

<button>
Add Task
</button>

Jquery

$("li i").click(function() {
        var p = $(this).parent();
        p.remove();

});

$('button').click(function() {
	$('ul').append("<li>New Task " +"<i class='far fa-trash-alt'></i></li>")
})

JS FIDDLE

Answer 1

[Andrew]

$(document).on('click','li i', function(){
        var p = $(this).parent();
        p.remove();
});

Обработчик не навесился на элемент которого еще не было.
Pray to Delegirovanie!

Comments

[Nikita_Migushev]

Andrew Все заработало! А почему не сработал первый вариант?

[Nikita_Migushev]

Andrew Ок, понял. Спасибо

[Антон]

Nikita_Migushev, Потому что элемент динамически создан, для этого используется on('событие'), простом метод click с динамически добавленными элементами не работает

[Nikita_Migushev]

Антон, Ок, понял