text box to list and remove

Takes items from text box and adds them to a list. Then clicking on the item will remove it from the list.

by Robert Herring

HTML

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

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:none;
	border-radius: 5px;
	text-align:center;
	margin-top:2px;
    cursor:pointer;
}

.list {
	font-family:garamond;
	color:#cc0000;
}

JavaScript

// The version of jQuery wasn't working well with the code here.

$(document).ready(function() {
    $('button').click(function() {
        // I added quotes around the input name.
        var toAdd = $("input[name='checkListItem']").val();
        $('.list').append('<div class="item">'+ toAdd +'</div>');
        
        // This clears the field after it's submitted
        $("input[name='checkListItem']").val("");
    });
    
    // delete item when you click it
    $(".list").on("click", ".item", function() {
        $(this).remove();
    });
});