Javascript 为什么我要添加新的按钮和列表，它不会执行请求1和请求2？

request1：单击列表项，它将打开和关闭.done类

request2：在每个列表项旁边添加按钮，以在单击按钮时删除该项

request3：添加新列表项时，会自动在其旁边添加删除按钮。同时满足要求1和2

我想问的问题是，我已经完成了请求1和2，正如标题所说：为什么我要添加新按钮和列表项，它不会完成请求1和2

第一个代码是js，第二个代码是css，第三个代码是html。 request1需要使用名为.done的css 在我的js中：

var按钮=document.getelementbyident； var input=document.getElementByIduserinput； var ul=document.querySelectorul； var span=document.getElementsByTagNamespan； var DeleteButton=document.getElementsByTagNamebutton； /*删除按钮*/ […document.getElementsByTagName'button'].forEachel=> el.addEventListener'click'，=> el.parentNode.parentNode.removeChildel.parentNode； /*toggle.done属性*/ forvar i=0；i 0{ createListElement； } } 函数addListAfterKeypressevent{ 如果inputLength>0&&event.keyCode===13{ createListElement； } } button.addEventListenerclick，addListAfterClick； input.addEventListenerkeypress、addListAfterKeypress； .完成{ 文字装饰：线条贯通； } 进来 笔记本 删去 果冻 删去 菠菜 删去 大米 删去 生日蛋糕 删去 蜡烛 删去 更新的JS：

var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.getElementById("Delete");
var span= document.getElementsByTagName("span");
var DeleteButton=document.getElementsByTagName("button");
/*Delete button */
[...document.querySelectorAll('.del')].forEach(el =>
  el.addEventListener('click', () =>
    el.parentNode.parentNode.removeChild(el.parentNode)));

/*toggle .done property*/
for(var i=0; i<span.length; i++){
   span[i].addEventListener("click", liClick);
}
function liClick(){
 this.classList.toggle("done");
}  


function inputLength() {
    return input.value.length;
}

function createListElement() {
    var li = document.createElement("li");
    li.addEventListener('click', () => {
        li.classList.toggle("done");
    })
    var deletebutton = document.createElement("button")
    var spanitem = document.createElement("span")
    spanitem.appendChild(document.createTextNode(input.value));
    deletebutton.appendChild(document.createTextNode("Delete"));
    deletebutton.addEventListener('click', () => {
        ul.removeChild(li);
    });
    ul.appendChild(li);
    li.appendChild(spanitem)
    li.appendChild(deletebutton);
    input.value = "";

}

function addListAfterClick() {
    if (inputLength() > 0) {
        createListElement();
    }
}

function addListAfterKeypress(event) {
    if (inputLength() > 0 && event.keyCode === 13) {
        createListElement();
    }
}

button.addEventListener("click", addListAfterClick);

input.addEventListener("keypress", addListAfterKeypress);

并将del类添加到所有按钮元素中