Remove What's Been Clicked 13/14


#1

$(document).ready(function (){
$('#button').click(function (){
var toAdd = $('input[name=checkListItem]').val();
$('.list').append('<div class="item">' + toAdd + '</div>');
});
});

Here is what I am confused with so far. When I did '.ready' (instead of '.on'), it works just fine but with '.on' is not working fine. When I leave it with .ready, the error message pop up saying, "Oops, try again. Did you call .on() on $(document) ?" so I am lost at this point.


#2

$(document).ready(function (){
    $('#button').click(function (){
        var toAdd = $('input[name=checkListItem]').val();
    		$('.list').append('<div class="item">' + toAdd + '</div>');
    });
});

$(document).on('click', '.item', function(){
    $('#button').click(function (){
        $(this).remove()
    });
});

I tried this method and I did fine. I am unsure if this is right but I am moving on to the next lesson for now. Please let me know if I did anything right or wrong here. Thank you!


#3

@vmanjluf Your $(document).on(...); part should be inside the $(document).ready(...); bit, and you shouldn't have a $('#button').click(...); part inside the $(document).on(...); section, but other than that it looks pretty good in your second version :slightly_smiling:

↑ That's kind of confusing, I know. Here's roughly what it should look like:

SPOILER!

$(document).ready(function() {
  $('#button').click(function() {
    // ...
  });

  $(document).on('click', '.item', function() {
    $(this).remove();
  });
});

I hope this helps you :slightly_smiling: