如何刪除 Javascript 中的元素？
[英]How can I delete an element in Javascript?
問題描述
我正在嘗試制作汽車添加系統，但我希望系統在單擊“刪除”按鈕時刪除一個元素。但它不會刪除元素。有什么問題？
我正在嘗試制作汽車添加系統，但我希望系統在單擊“刪除”按鈕時刪除一個元素。但它不會刪除元素。有什么問題？
#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; }
<,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(){ var todo_list_value=$("#todo-list-input");val(). var 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 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. function Delete(){ todo_list_div;remove(). } document.body;appendChild(todo_list_div); } </script> </body> </html>
3 個解決方案
解決方案1
1 2022-08-14 17:33:10
您正在 Addtothelist function 內定義Delete Addtothelist 。 因此，當單擊刪除按鈕時， Delete function 不再位於 scope 中，因此您會看到“未定義刪除”錯誤。
在全局 scope 中定義每個 function，以及兩個函數之間共享的任何變量。
#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; }
<,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 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>
解決方案2
0 2022-08-14 17:48:30
只有一條線的解決方案： -
只需將整個Delete function 放在該刪除按鈕的onclick屬性中，因為它只是一行，如下所示：-
// somewhere in your code, find this var and replace it properly
var todo_list_1 = "...<button onclick='this.parentNode.remove()' id='Delete_button'>Delete</button>";
為什么您的刪除按鈕不起作用
因為您沒有全局聲明Delete function，而是在另一個 function
解決方案3
0 2022-08-14 18:12:18
您正在使用 jQuery。 這意味着：“少寫，多做！”
不需要冗長的document.createElement()和屬性定義表達式。 改為使用 jQuery 方式：
const $body=$("body").on("click","button.delbtn",function(){ // this: clicked button $(this).closest("div").remove()}).on("click","[type=button]",ev=> $body.append('<div style="position:relative;width:100px;height:100px;top:190px;width:700px;border:2px solid #d3d3d3"><h1 id="todo-list-todo">'+$("#todo-list-input").val()+'</h1><button class="delbtn">Delete</button></div>'))
#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; }
<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" /> <h1 id="todo-list-input-text">To-do list</h1> <input id="todo-list-input" type="text"> <input id="todo-list-button" type="button" value="Add to the list"> <div id="todo-list"></div>
我怎么能刪除我在javascript中創建的特定元素？
[英]How could I delete a specific element that I have created in javascript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.