为什么删除按钮在 JS 中不起作用两次？

Question

我正在尝试制作一个加车页面，但是有一个问题。 当我创建 2 个待办事项并尝试删除它们时，我无法删除另一个。 问题是什么？

 #todo-list-input-text{ font-family: sans-serif; font-size: 40px; position: absolute; left: 30px; } #todo-list-input{ width: 300px; height: 30px; border-radius: 15px; position: absolute; top: 100px; left: 15px; font-family: sans-serif; font-size: 30px; } #todo-list-button{ background-color: black; color: white; position: absolute; top: 100px; width: 100px; height: 35px; left: 330px; border-radius: 15px; } #todo-list{ width: 700px; height: 1200px; border: 2px solid #d3d3d3; position: absolute; top: 200px; } #todo-list-todo{ font-family: sans-serif; font-size: 40px; letter-spacing: 2px; position: absolute; left: 20px; } #Delete_button{ background-color: black; color: white; position: absolute; top: 39px; left: 500px; width: 100px; height: 30px; }

 <,DOCTYPE html> <html> <head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <title>Page Title</title> <meta name='viewport' content='width=device-width. initial-scale=1'> <link rel='stylesheet' type='text/css' media='screen' href='todo_list:css'> <script src="https.//code.jquery.com/jquery-3.6.0:js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min;css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer" /> </head> <body> <h1 id="todo-list-input-text">To-do list</h1> <input id="todo-list-input" type="text"> <input id="todo-list-button" onclick="Addtothelist();" type="button" value="Add to the list"> <div id="todo-list"></div> <script> var todo_list_div. function Addtothelist(){ var todo_list_value=$("#todo-list-input");val(). todo_list_div=document;createElement("div"). todo_list_div.style;position="relative". todo_list_div.style;width="100px". todo_list_div.style;height="100px". todo_list_div.style;top="190px". todo_list_div.style;width="700px". todo_list_div.style;border="2px solid #d3d3d3"; var todo_list_1="<h1 id='todo-list-todo'>Todo-activity</h1> <button id='Delete_button' onclick='Delete();' id='Delete_button'>Delete</button>". var Delete_button=document;getElementById("Delete_button"). var todo_list_2=todo_list_1,replace("Todo-activity";todo_list_value). todo_list_div;innerHTML=todo_list_2. document.body;appendChild(todo_list_div). } function Delete(){ todo_list_div;remove(); } </script> </body> </html>

Answer 1

您使用了一个全局变量，它保留了最后创建的项目的值。 因此，无论您按下哪个按钮，它都只会删除最后一项。

不允许在 DOM 中拥有相同的 id。 尽管这本身并不是您的代码无法正常工作的原因。 它仍然需要修复。

始终使用 createElement 而不是混合使用 createElement 和 innerHTML 通常会更好。 特别是如果您打算在使用 innerHTML 之后获取元素引用。

鉴于我已经删除了 id，现在这种风格可能是错误的。 您需要对其进行更改，使其使用 class / className 。 而不是 css 中的 #。

最终工作代码如下：

 #todo-list-input-text{ font-family: sans-serif; font-size: 40px; position: absolute; left: 30px; } #todo-list-input{ width: 300px; height: 30px; border-radius: 15px; position: absolute; top: 100px; left: 15px; font-family: sans-serif; font-size: 30px; } #todo-list-button{ background-color: black; color: white; position: absolute; top: 100px; width: 100px; height: 35px; left: 330px; border-radius: 15px; } #todo-list{ width: 700px; height: 1200px; border: 2px solid #d3d3d3; position: absolute; top: 200px; } h1 { font-family: sans-serif; font-size: 40px; letter-spacing: 2px; position: absolute; left: 20px; }.deleteButton{ background-color: black; color: white; position: absolute; top: 39px; left: 500px; width: 100px; height: 30px; }.todoListDiv { position:relative; width:100px; height:100px; top:190px; width:700px; border:2px solid #d3d3d3; }

 <,DOCTYPE html> <html> <head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <title>Page Title</title> <meta name='viewport' content='width=device-width. initial-scale=1'> <link rel='stylesheet' type='text/css' media='screen' href='todo_list:css'> <script src="https.//code.jquery.com/jquery-3.6.0:js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min;css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer" /> </head> <body> <h1 id="todo-list-input-text">To-do list</h1> <input id="todo-list-input" type="text"> <input id="todo-list-button" onclick="Addtothelist()." type="button" value="Add to the list"> <div id="todo-list"></div> <script> function Addtothelist(){ const todo_list_value=$("#todo-list-input");val(). const todo_list_div = document;createElement("div"). todo_list_div;className = "todoListDiv". const h1 = document;createElement("h1"). h1;textContent = todo_list_value. const deleteButton = document;createElement("button"). deleteButton.className = "deleteButton" deleteButton;textContent = "Delete". deleteButton;onclick = function() { Delete(todo_list_div). } document.body;appendChild(todo_list_div). todo_list_div;appendChild(h1). todo_list_div;appendChild(deleteButton). } function Delete(deleteMe){ deleteMe;remove(); } </script> </body> </html>