使用单击删除每个 li 项目待办事项列表

Question

大家好，我打算制作一个待办事项列表，但我遇到了一个问题，我想制作一个像这样内嵌在列表项中的按钮 <li>my task</li><button>Delete</button> 但是我的删除按钮没有正确删除项目它只删除了一个项目然后开始给出错误

这是我的代码，请看这里并告诉我我犯了什么样的错误我是网络开发的初学者

<!DOCTYPE html>
<html>

<body>
    <input type="text" placeholder="Enter Task" onfocus="this.value=''" id="myTask">
    <button onclick="myFunction()">Try it</button>
    <button onclick="deleteTask()">del it</button>

    <ol id="myList">

    </ol>



    <script>
        function myFunction() {
           
            var node = document.createElement("LI");
            var myTask = document.getElementById("myTask").value;
            var textnode = document.createTextNode(myTask);
            node.appendChild(textnode);
            document.getElementById("myList").appendChild(node);
            var btn = document.createElement("input");
            var abcElements = document.querySelectorAll('LI');

            for (var i = 0; i < abcElements.length; i++){
                abcElements[i].id = 'abc-' + i;
            }
            // node.setAttribute("id", "li1");
            btn.setAttribute("type", "submit");
            btn.setAttribute("value", "delete");
            btn.setAttribute("id", "delete");
            node.appendChild(btn);
            btn.addEventListener('click', ()=>{
                // console.log("OK");
                document.getElementById("abc-0").parentNode.removeChild(document.getElementById("abc-0"))

            })

        }

        function deleteTask() {
            var i = 0;
            var item = document.getElementsByTagName("LI")[i];
            i++;
            item.parentNode.removeChild(item);
        }

    </script>
</body>

</html>

所以我只想在单击 尝试一下 按钮

时为每个列表项创建一个删除按钮

Answer 1

尝试这样的事情：

function myFunction() {
   const li = document.createElement("li");
   li.innerHTML = document.getElementById("myTask").value;

   const button = document.createElement("button");
   button.innerHTML = "delete";
   
   li.appendChild(button);
   button.addEventListener("click", () => li.parentNode.removeChild(li));

   document.getElementById("myList").appendChild(li);
}

Answer 2

需要解决的几点：

不要调用函数 myFuntion。给它一个描述性的名字，比如 addTask
不要创建带有序号的 id 属性。这几乎从来不需要。
初始 HTML 不应该有删除按钮，因为它应该与列表项相关联。
不要将删除按钮的类型设为“提交”。只有当您有一个 form 元素并且需要提交表单时，这才有意义。
不要一遍又一遍地给创建的按钮相同的 id：这在 HTML 中是无效的。 id 属性应该有唯一的值。但同样，很少需要为动态生成的元素分配 id。
在事件侦听器中，您可以使用事件对象来获取触发事件的元素。或者您可以在 function 中使用 this 对象。但是你也可以引用存在于所谓闭包中的node变量。

function addTask() {
    var node = document.createElement("LI");
    node.textContent = document.getElementById("myTask").value;

    var btn = document.createElement("button");
    btn.textContent = "delete";
    btn.addEventListener('click', () => node.remove());
    node.appendChild(btn);

    document.getElementById("myList").appendChild(node);
}

li > button { margin-left: 5px }

<input type="text" placeholder="Enter Task" onfocus="this.value=''" id="myTask">
<button onclick="addTask()">Add task</button>
<ol id="myList"></ol>

使用单击删除每个 li 项目待办事项列表

remove each li item todo list using on click

javascript

dom

function

dom-events

todoist