问存储数据的基本ToDo列表

EN

$(document).ready(function() {
    
    $(document).on("click",".items",function() {
        $(this).remove();
    });
    
    $(document).on("click","li", function () {
        $("li").removeAttr("class");
        $(this).attr("class","selectedlist");
        $(".items, #itemsbar > p").remove();
        $("#itemsbar").append('<div class=\"items\" id=\"c1div\"><input type=\"checkbox\" id=\"c1\" name=\"c1\" /> \
        <label for=\"c1\"><span></span>New Box~</label></div><p>Click to Add</p>');
    });
    
    $(document).on("click","#itemsbar > p",function () {
        $(this).remove();
        $("#itemsbar").append('<input class="addnew" type=\"text\"></input>');
    });
    
    $(document).on("keyup",'.addnew', function (e) {
        if (e.which == 13) {
            var value = $(".addnew").val();
            $("#itemsbar").append('<div class=\"items\" id=\"c1div\"><input type=\"checkbox\" id=\"c1\" name=\"c1\" /> \
            <label for=\"c1\"><span></span>' + value + '</label></div>');
            $(this).remove();
            e.preventDefault();
            $("#itemsbar").append('<p>Click to Add</p>');
        }
    });
    
    $(document).on("click","#addlist",function() {
        $("#listsbar").append('<input class="addnewlist" type=\"text\"></input>');
    });

    $(document).on("keyup",'.addnewlist', function (e) {
        if (e.which == 13) {
            var value = $(".addnewlist").val();
            $("#lists").append('<li id="l3">' + value + '</li>');
            $(this).remove();
            e.preventDefault();
        }
    });
    
});

h1 {
    font-size: 150%;
    color: white;
}

#title {
    float: left;
}

#main {
    height: 100vh;
    width: 100vw;
}

/* Lists Bar */

#listsbar {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 30%;
    height: 100%;
    float: left;
    background-color: #6678AC;
}

#listsbar h1, li {
    padding: 10px;
}

#listsbar ul {
    list-style-type: none;
    padding: 0;
}

#lists li {
    color: white;
}

.selectedlist {
    width: 100%;
    background-color: #0D1839;
    display: block;
}

/* Items Bar */

#itemsbar {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 70%;
    height: 100%;
    padding: 20px;
    float: right;
    background-color: #C7D5FF;
}

#itemsbar ul {
    list-style-type: none;
    padding: 0;
}

<div id="main">
    <div id="listsbar">
        <h1 id="title">To Do List</h1>
        <h1 id="addlist">+</h1>
        <ul id="lists">
            <li id="l1" class="selectedlist">Test List</li>
            <li id="l2">Test List 2</li>
        </ul>
    </div>
    <div id="itemsbar">
        <div class="items" id="c1div"><input type="checkbox" id="c1" name="c1" />
        <label for="c1"><span></span>Check Box 1</label></div>
        <div class="items" id="c2div"><input type="checkbox" id="c2" name="c2" />
        <label for="c2"><span></span>Check Box 2</label></div>
        <p>Click to Add</p>
    </div>
</div>