Online jQuery Editor

Browse more Jquery Examples
<!DOCTYPE html>
<html>
<head>
<title>Try jQuery Online</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    //add button click event
   $('#add').click(function(){
       //get input value
       var newItem = $('#item').val();
       //put in a list element
       var newItemL = $('<li></li>').text(newItem);
       //append Close button
       var newItemLC = $(newItemL).append("<button class='rem'> X </button>");
       //append to ordered list
       $('#myList').append(newItemLC);
       //close button click event
        $('.rem').on("click", function(){
        $(this).parent().remove();
   })
     
   })
   
   
});

</script>
<style>
.selected { 
    color:red; 
}
.highlight { 
    background:yellow; 
}
</style>
</head>
<body>
<h1>TO-DO LIST</h1>
<input id="item" type="text" placeholder = "New Item" />
<button id="add">Add</button>
<ol id="myList">
   
</ol>

</body>
</html>
Online jQuery Editor

Follow

Newsletter
