Code:
<!DOCTYPE html>
<html>
<head>
<title>Todo Apps</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style type="text/css">
*{
font-size: 12px;
font-family: arial;
}
ul{
list-style: none;
}
ul li {
font-size: 14px;
padding: 5px;
background-color: #ccddff;
margin-bottom: 1px;
}
</style>
</head>
<body>
City Name : <input type="text" id="city_name"/> <button>Add</button><br/>
<ul id="item"></ul>
<script type="text/javascript">
$(document).ready(function(){
var item = [],city_item = '';
$('body').on('click','button',function(){
get_item = $('#city_name').val();
if(get_item!=''){
$('ul#item').append("<li><a href='javascript:void(0)' class='delete'>X</a> "+get_item+'</li>');
$('#city_name').val('');
}
})
$('body').on('click','.delete',function(){
var ind = $( ".delete" ).index( this );
$('ul > li').eq(ind).hide('slow');
})
});
</script>
</body>
</html>
Output:
0 comments:
Post a Comment