待办事项列表应用程序：为什么我的代码阻止我删除最近添加的列表元素？

Question

我正在尝试创建待办事项列表应用程序。当用户单击提交按钮及其用户输入时，我使用 JS 在网页上动态创建列表元素。

这是我目前的情况：

const inputTXT = document.querySelector('.inputText');          //input element
const submitBUTT = document.querySelector('.submitButton');     //button element
const listITEMS = document.querySelector('.items');             //list element

function createListElement(inputString){

    const newListItem = document.createElement("li");
    const newEditButton = document.createElement("button");
    const newDeleteButton = document.createElement("button");

    const listText = document.createTextNode(inputString);
    newListItem.appendChild(listText);
    const editText = document.createTextNode("Edit");
    newEditButton.appendChild(editText);
    const deleteText = document.createTextNode("Delete");
    newDeleteButton.appendChild(deleteText);

    newListItem.appendChild(newEditButton);
    newListItem.appendChild(newDeleteButton);

    //assign class to each list element for line below:
    newDeleteButton.className = "deleteCLASS";
    newEditButton.className = "editCLASS";

    //delete function:
    var deleteButtonArray = document.querySelectorAll(".deleteCLASS");   

    for(var i=0; i < deleteButtonArray.length ; ++i){
        deleteButtonArray[i].onclick = function(){
            this.parentNode.remove();
        }
    }
    
    return newListItem;
}




function addTask(){
    listITEMS.classList.remove('hidden');
    const ITEM = createListElement(inputTXT.value);
    document.getElementsByClassName("items")[0].appendChild(ITEM);
    inputTXT.value = '';    //Resets user input string
}



submitBUTT.addEventListener("click", addTask);

*{
    margin: 0;
    padding: 0;
}

.container{
    width: 800px;
    margin: 0 auto;
    font-family: sans-serif;
}

.main-header{
    background: #e7e7e7;
    text-align: center;
    margin: 15px;
    padding: 20px;
}

.inputText{
    margin-top: 20px;

}

h1{
    font-size: 35px;
}

ul{
    list-style: square;
    margin-left: 275px;
}

.hidden{
    display: none;
}

.itemLIST{
    margin-bottom: 5px;
}

.editBUTT{
    margin-left: 20px;
}

.deleteBUTT{
    margin-left: 4px;
}

<!DOCTYPE html>
    <head>
        <title> "To-do List" </title>
        <link href="style.css" rel="stylesheet"/>
        <meta charset = "UTF-8"/>

    </head>
    <body>
        <div class = "container">



        
            <div class = "main-header">

                <h1>My To-do List</h1>

                <input type="text" placeholder = "Enter Item"  class= "inputText" required> 

                <button class = "submitButton">Submit</button>

            </div>

            <ul class ="items hidden">
        
            </ul>
   

        

        </div>
        
        <script src="script.js"></script>
    </body>
</html>

这对大多数部分都有效，但出于某种原因我无法删除最后一个列表元素。

我为弄清楚发生了什么所做的唯一调试是打印出“deleteButtonArray”变量，它使用关键字“querySelectorAll”。由此，我发现当用户点击提交按钮时，会打印一个空的 NodeList。当用户第二次点击提交按钮时，我们才会得到一个只有 1 个元素的 NodeList。当用户第三次点击提交按钮时，我们得到一个包含 2 个元素的 NodeList。

看起来问题与当用户点击提交按钮时 querySelectorAll 没有及时正确更新有关。我用 getElementsByClassName 替换了它，仍然是同样的问题。

现在，我认为问题与我尝试在 createListElement 函数中实现删除函数的方式有关。

我认为我的代码的工作方式：每次用户点击提交按钮时，都会创建一个列表元素以及一个包含目前所有列表元素的数组（实际上是一个 NodeList）。这意味着如果我删除列表元素，数组将更新为正确数量的列表元素。

而且，它确实在大多数情况下正确更新。就是不知道为什么我们第一次创建元素的时候数组是空的。当用户第一次点击提交按钮时，querySelectorAll 或 getElementsByClassName return 不应该是一个非空的 NodeList 吗？

Answer 1

好的，这是我已经尝试并测试过的解决方案，它似乎有效。

我从 createListElement 函数中删除了删除项目部分，使其成为自己的函数，并为创建的每个删除按钮添加了一个事件侦听器，因此在单击时它将运行现在独立的删除函数.

未对 HTML 或 CSS 进行更改。

const inputTXT = document.querySelector('.inputText');          //input element
const submitBUTT = document.querySelector('.submitButton');     //button element
const listITEMS = document.querySelector('.items');             //list element

function createListElement(inputString){

    const newListItem = document.createElement("li");
    const newEditButton = document.createElement("button");
    const newDeleteButton = document.createElement("button");

    const listText = document.createTextNode(inputString);
    newListItem.appendChild(listText);
    const editText = document.createTextNode("Edit");
    newEditButton.appendChild(editText);
    const deleteText = document.createTextNode("Delete");
    newDeleteButton.appendChild(deleteText);

    newListItem.appendChild(newEditButton);
    newListItem.appendChild(newDeleteButton);
  
//Here is the new addEventListener
    newDeleteButton.addEventListener("click", deleteStuff);


    //assign class to each list element for line below:
    newDeleteButton.className = "deleteCLASS";
    newEditButton.className = "editCLASS";
    
    return newListItem;
}

//Here is the new delete function. The onclick function that was there before has been removed because, in this case, it's not needed.
function deleteStuff() {
   //delete function:
    var deleteButtonArray = document.querySelectorAll(".deleteCLASS");   

    for(var i=0; i < deleteButtonArray.length ; ++i){
            this.parentNode.remove();
    }
}


function addTask(){
    listITEMS.classList.remove('hidden');
    const ITEM = createListElement(inputTXT.value);
    document.getElementsByClassName("items")[0].appendChild(ITEM);
    inputTXT.value = '';    //Resets user input string
}



submitBUTT.addEventListener("click", addTask);

待办事项列表应用程序：为什么我的代码阻止我删除最近添加的列表元素？

To-do list application: Why does my code prevent me from deleting the most recently added list element?

javascript

nodelist

getelementsbyclassname

queryselector