.val() een input en remove it on click

by Dennis Betman

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 () {
    $(document).on('click', '.item', function () {
        $(this).remove();
    });
    $('#button').click(function () {
        var toAdd = $('input[name=checkListItem]').val();
        $('.list').append('<div class="item">' + toAdd + '</div>');
    });
});