Removable Checklist Items
<p>I am trying to create an interactive to do list in which I enter text into a text box, click a button, and it adds the items underneath. So far I have successfully been able to add items to my list using the button but am not able to remove one item at a time by clicking on it, which is what I would like to be able to do. (Ideally each item would have a check box next to it and when I click that the item would disappear). So far, using the .remove() action I have only been able to make ALL of the items in my list disappear by clicking. I did some research and thought that the .on() action may be what I need. I tried it and now I cannot make items disappear at all. This is my code:</p>

<pre><code>$(document).ready(function() {
    $('#button').click(function() {
        var toAdd=$('input[name=checkListItem]').val();
        $('#item').append.('.list');
    });
    $(document).on('click','item',function() {
        $(this).remove();
    });
});
</code></pre>

<p>Is there anything that stands out as being incorrect? Or is there a better way to go about this? I am brand new to this and appreciate any and all feedback.Thank you!</p>
