SOURCE

        var myNodelist=document.getElementsByTagName("LI");
        var i;
        for(i=0;i<myNodelist.length;i++){
            var span=document.createElement("SPAN");
            var txt=document.createTextNode("\u00D7");
            span.className="close";
            span.appendChild(txt);
            myNodelist[i].appendChild(span);
        }

        var close=document.getElementsByClassName("close");
        var i;
        for(i=0;i<close.length;i++){
            close[i].onclick=function(){
                var div=this.parentElement;
                div.style.display="none";
            }
        }

        var list=document.querySelector("ul");
        list.addEventListener('click',function(ev){
            if(ev.target.tagName==="LI"){
                ev.target.classList.toggle('checked');
            }
        },false);

        function newElement(){
            var li=document.createElement("li");
            var inputValue=document.getElementById("myInput").value;
            var t=document.createTextNode(inputValue);
            li.appendChild(t);
            if(inputValue===''){
                alert("写点东西哦");
            }else{
                document.getElementById("myUL").appendChild(li);
            }
            document.getElementById("myIput").value="";

            var span=doucument.createElement("SPAN");
            var txt =document.createTextNode("\u00D7");
            span.closeName="close";
            span.appendChild("txt");
            li.appendChild("span");
            
            for(i=0;i<close.length;i++){
                close[i].onclick=function(){
                    var div=this.parentElement;
                    div.style.display="none";
                }
            }
        }

<div id="myDIV" class="header">
            <h2 style="margin:5px">奇妙清单</h2>
            <input type="text" id="myInput" placeholder="事件...">
            <span onclick="newElement()" class="addBtn">添加</span>
        </div>

        <ul id="myUL">
            <li>起床</li>
            <li class="cheked">吃早饭</li>
            <li>学习</li>
            <li>看书</li>
            <li>写字</li>
            <li>听音乐</li>
        </ul>

        body{
            margin:10px;
            height: 1000px;
            width:500px;
        }

        *{
            box-sizing:border-box;
        }

        ul{
            margin:0;
            padding:0;
        }

        ul li{
            cursor:pointer;
            position:relative;
            padding:12px 8px 12px 40px;
            background:#eee;
            font-size:18px;
            transition:0.2s;

            -webkit-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
        }

        ul li:nth-child(odd){
            background:#f9f9f9;
        }

        ul li:hover{
            background:#ddd;
        }

        ul li.checked{
            background:#888;
            color:#fff;
            text-decoration:line-through;
        }

        ul li.checked::before{
            content:'';
            position:absolute;
            border-color:#fff;
            border-style:solid;
            border-width:0 2px 2px 0;
            top:10px;
            left:16px;
            transform:rotate(45deg);
            height:15px;
            width:7px;
        }

        .close{
            position:absolute;
            right:0;
            top:0;
            padding:15px 16px 15px 16px;
        }

        .close:hover{
            background-color:black;
            color:white;
        }

        .header{
            background-color:#f44336;
            padding:30px 40px;
            color:white;
            text-align:center;
        }

        .header:after{
            content:"";
            display:table;
            clear:both;
        }

        input{
            border:none;
            width:75%;
            padding:12px;
            float:left;
            font-size:16px;
        }

        .addBtn{
            padding:9px;
            width:25%;
            background:#d9d9d9;
            color:#555;
            float:left;
            text-align:center;
            font-size:16px;
            cursor:pointer;
            transition:0.3s;

        }

        .addBtn:hover{
            background:#bbb;
        }