时间戳

首页 > 解决方案 > 使用单击删除每个 li 项目待办事项列表

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

问题描述

你好家人我打算制作一个待办事项列表，但我遇到了一个问题，我想制作一个像这样内嵌在列表项中的按钮，<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>

所以我只想在单击Try it按钮时为每个列表项创建一个删除按钮

标签： javascriptfunctiondomdom-eventstodoist

解决方案

尝试这样的事情：

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);
}

推荐阅读