How can I delete an element in Javascript?
Question
I am trying to make a car adding system but I want system to delete an element when the Delete button is clicked.But It doesn't delete element.What is the problem?
I am trying to make a car adding system but I want system to delete an element when the Delete button is clicked.But It doesn't delete element.What is the problem?
#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 answers
solution1
1 2022-08-14 17:33:10
You're defining the Delete function inside of the Addtothelist function. So when the delete button is clicked, the Delete function is no longer in scope hence why you see the "Delete is not defined" error.
Define each function in the global scope, as well as any variables which are shared between the two functions.
#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>
solution2
0 2022-08-14 17:48:30
Just one line solution:-
Just put the whole Delete function in the onclick attribute of that delete button because it is just one line, like this:-
// 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>";
Why your delete button not works
Because you did not declared the Delete function globally, but inside an another function
solution3
0 2022-08-14 18:12:18
You are using jQuery. That means: "Write less, do more!"
There is no need for your lengthy document.createElement() and attribute definition expressions. Do it the jQuery-way instead:
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How can I delete an element in Javascript
How can I delete an element from a JSON file using javascript
How can I remove/delete a HTML element using JavaScript?
How can I delete an element in an object?
Python selenium, how can i delete an element?
Can not delete an element of array in JavaScript
Javascript I want to delete an element
How could I delete a specific element that I have created in javascript?
How can I delete blob files in JavaScript?
JavaScript How Can I achive this in delete dialog
Related Tags