I'm relatively new to utilizing jquery. I decided to tackle this project for enjoyment: http://jsbin.com/pevateli/2/
My goal is to allow users to input items, add them to a list, and then have the option to select and delete them by clicking on the top right image.
JavaScript:
$(document).ready(function(){
$("#button").click(function(){
$(".del").slideDown(100);
var toAdd = $('input[name=checkListItem]').val();
$(".list").append("<div class='item'><input type='checkbox'/>" + toAdd + "</div>");
});
});
$(document).on("click",".del",function(){
var rmv = $("input:checkbox:checked").val();
$(rmv).remove();
});
HTML:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
<title>To Do</title>
<link rel="stylesheet" type="text/css" href="a style.css"/>
<script type="text/javascript" src="a script.js"></script>
</head>
<body>
<h2>To Do</h2>
<form name="checkListForm">
<input type="text" name="checkListItem"/>
</form>
<img style="display:none;" class='del' src='del.png' align='right' width='20px'> </img>
<div id="button">Add!</div>
<br/>
<div class="list"></div>
</body>
</html>
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;
}
If you'd like to see it in action, here's the live link: http://jsbin.com/pevateli/2/