"Список дел" на чистом javascript

<div class="wrapper">
        <div class="header">
                <h1>Список дел</h1>
                <input type="text" placeholder="Введите новое дело..." id="toDoEl">
                <span class="addBtn" onclick="newElement()">Добавить</span>
        </div>
        <ul id="list">

        </ul>
</div>

    * {

           box-sizing: border-box;
    }

    .wrapper {width: 920px; margin: 0 auto}

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


    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: 12px 16px 12px 16px;
    }


    .close:hover {
           background-color: #f44336;
           color: white;
    }


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


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


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


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


    .addBtn:hover {
           background-color: #bbb;
    }

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

    
    function newElement() {
           var li = document.createElement('li');
           var inputValue = document.getElementById('toDoEl').value;
           var t = document.createTextNode(inputValue);
           li.appendChild(t);
           if(inputValue == "") {
                  alert("Введите ваше дело!");
           } else {
                  document.getElementById('list').appendChild(li);
           }
           document.getElementById('toDoEl').value = "";
           var span = document.createElement('SPAN');
           var txt = document.createTextNode("X");
           span.className = "close";
           span.appendChild(txt);
           li.appendChild(span);
    }