jQuery Study

Learning JQ

by nysteve

HTML

<h2>To Do</h2>

<form name="checkListForm">
    <input type="text" name="checkListItem" />
</form>
<div id="button">Add!</div>
<br/>
<div class="list"></div>

CSS

h2 {
    font-family:arial;
}
form {
    display: inline-block;
}
#button {
    display: inline-block;
    height:20px;
    width:70px;
    background-color:#cc0000;
    font-family:arial;
    font-weight:bold;
    color:#ffffff;
    border-radius: 5px;
    text-align:center;
    margin-top:2px;
}
.list {
    font-family:garamond;
    color:#cc0000;
}

JavaScript

$(document).ready(function () {
    $('#button').click(function () {
        var toAdd = $('input[name=checkListItem]').val();
        
        //var item = $('.item');
        //$('.list').append(item).text(toAdd);
        
        $('.list').append("<div class='item'>" + toAdd + "</div>");
/*
What I was thinking was to avoid writing out the html of the div with the class 'item', and just refrencing like a selector, see how below the on() function's second parameter works?

So in other words:
        $('.list').append('.item').text(toAdd);

In my mind, I'm adding a div with a class of 'item' who's innerHTML or in this case text is the value of the 'toAdd' varaible. It seems that I can the append() can take variables as parameters but not jq objects?        */
    });

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