Remove What's Been Clicked


#1

I got this error, but code is work correctly.

error: Oops, try again. Did you call .on() on $(document) ?

code:

$(document).ready(function() {
$("#button").click( function(){
var toAdd = $("input[name=checkListItem]").val();
$(".list").append('

' + toAdd + '
');
$('input').val('');
});
$('.list').on('click','.item',function(){
$(this).remove()});
});

also tried this

$(document).ready(function() {
$("#button").click( function(){
var toAdd = $("input[name=checkListItem]").val();
$(".list").append(
'

' + toAdd + '
'
);
$('input').val('');
});
}).on('click','.item',function(){
$(this).remove()});

#2

.item is a selector in the range of .list, granted, but document is a better object from which to delegate.


#3

Yep. I solved this problem. Just add another one $(document).on(//..);


#4

What you've discovered is that the document object is present when none of the content is loaded yet. Using on() permits us to build our listeners before the document tree is even built. We wouldn't be having this conversation if the document object didn't already exist.