To-do list

simple to-do list

HTML

<ul></ul>
<a href="#" id="add">Add</a>

CSS

body {font-family: Arial, sans-serif; font-size: 11px;}

ul {list-style: none; margin: 30px 0; padding: 0;}

li {position:relative;}

span {cursor: pointer; position: absolute; right: 0; top: 0;}

JavaScript

$(document).ready(function(){
    
    var MainMenu=[{text:'Status',Items:[]}];
    var subMenu=[{text:'One',Items:[]}];
    
    subMenu[0].Items.push({Name:'s1',color:'Yellow'});
    subMenu[0].Items.push({Name:'s2',color:'Yellow'});
    MainMenu[0].Items.push(subMenu);
    console.log(MainMenu);
     //console.log(subMenu);
    
    // add new item
    $('#add').click(function(){
        
        $('ul').append('<li><input type="checkbox" class="check" /> <label contenteditable="true">Tap to edit Text</label> <span title="remove item">x</span></li>');
        
        $('input[type="checkbox"]').click(function(){
           $(this).parent().css('text-decoration','line-through');
        });  
        
        $('span').click(function(){
            $(this).parent().remove();
        });
        
    });   
    
    //$('ul').sortable();
    
});