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 ?

#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>

Jaxon Crosmas · Accepted Answer · 2022-08-14 17:33:10Z

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>

Abhay · Accepted Answer · 2022-08-14 18:09:26Z

0

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

edited Aug 14, 2022 at 18:09

answered Aug 14, 2022 at 17:48

Abhay

514 bronze badges

Comments

Carsten Massmann · Accepted Answer · 2022-08-14 19:05:17Z

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>

Collectives™ on Stack Overflow

How can I delete an element in Javascript?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related