Удаление элементов списка после их добавления с помощью jQuery

Question

У меня возникли проблемы с удалением элементов списка после щелчка после использования jquery для добавления элементов списка. Если бы мне пришлось угадать, почему это происходит, это связано с тем, что jquery может просматривать исходный HTML-документ, а не обновленный после добавления элементов списка? В любом случае, я не могу понять, как это исправить.

Вот мой HTML:

<form> 
     <div> 
      <label for="todo">I need to:</label> 
      <input type="text" id="todo" /> 
     </div> 
     <button id ="add" type="button">Add to your to-do list!</button> 
</form> 
<ul> 
</ul> 

И мой JQuery:

$(document).ready(function() { 
    $('#add').click(function() { 
     var item = $('#todo') 
     $('ul').prepend("<li>"+item.val()+"</li>"); 
    }); 
     $('li').click(function() { 
     $(this).remove(); 
    }); 
}); 

Answer 1

Поскольку вы пытаетесь добавить обработчики событий для динамически добавляемых элементов, которые необходимо использовать событие делегации

$(document).ready(function() { 
    $('#add').click(function() { 
     var item = $('#todo') 
     $('ul').prepend("<li>"+item.val()+"</li>"); 
    }); 
    $('ul').on('click', 'li', function() { 
     $(this).remove(); 
    }); 
}); 

Демонстрация: Fiddle