0

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

4

2 回答 2

0

尝试这样的事情：

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);
}
于 2021-03-12T10:16:12.070 回答
0

需要解决的一些问题：

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

于 2021-03-12T10:29:19.727 回答