为什么在添加新的待办事项后我的待办事项列表删除功能不起作用？

Question

每个人。将新的待办事项添加到待办事项列表后，我的删除和完成功能不起作用。为什么会这样呢？我重写了jquery及其工作中的所有内容。 是因为节点列表还是其他原因？

    // ===============================
    // Vanilla JS  
    // ===============================

    // List Done   
    var lis = document.querySelectorAll("li");
        for (var i = 0; i < lis.length; i++){

             lis[i].addEventListener("click", function(){
                this.classList.toggle("listStyle");
            }) 
        }
    //List Remove
    var deleteSpan = document.querySelectorAll("span");
        for(var i = 0; i < deleteSpan.length; i++){

            deleteSpan[i].addEventListener("click", function(event){
                this.parentNode.remove();
                    event.stopPropagation();
            })

        }
    // List Add
    var input = document.querySelector("input[type='text']");
        input.addEventListener("keypress", function (e){
            if(e.which === 13){
                var inputValue = this.value;
                this.value="";
                var ul = document.querySelector("ul");
                var addToDo = "<li><span>"+"X "+"</span>" + inputValue + "</li>";
                ul.innerHTML += addToDo; }          
        })