How to delete a specific dom table in javascript

Question

I have created a button 'Add Goal'. On clicking it A table would be created along with a button named 'Remove Goal'. On clicking the 'Remove Goal' button, that specific table should be deleted. But instead the lowest table gets deleted. What code should I write in the 'removeGoal()' function so as to delete that specific table the 'Remove Goal' button is associated with? Below is the following HTML and Javascript Code.

HTML CONTENT:

<!DOCTYPE html>
<html lang="en-US">
  <head>
  </head>
  <body>
    <button type="button" onclick="addGoal()">Add Goal</button>
  </body>
</html>

JAVASCRIPT CONTENT:

<script language="javascript" type="text/javascript">
   function addGoal() {
     var x = document.createElement("table");
     x.id = "table1";
     document.body.appendChild(x);

     var y = document.createElement("tr");
     x.appendChild(y);

     var z = document.createElement("th");
     z.innerHTML = "Goal Name";
     y.appendChild(z);

     var a = document.createElement("tr");
     x.appendChild(a);

     var b = document.createElement("td");
     a.appendChild(b);

     var c = document.createElement("input");
     c.type = "text";
     c.name = "goalName";
     b.appendChild(c);

     var d = document.createElement("button");
     d.type = "button";
     d.innerHTML = "Remove Goal";
     d.id = "button1";
     d.setAttribute("onclick", "removeGoal()");
     document.body.appendChild(d);
   }

   function removeGoal() {
     var removeTab = document.getElementById('table1');
     var parentE1 = removeTab.parentElement;
     parentE1.removeChild(removeTab);  

     var removeBut = document.getElementById('button1');
     var parentE2 = removeBut.parentElement;
     parentE2.removeChild(removeBut); 
     //This removes the lowest table.
     //Syntax to delete the table the 'Remove Goal' button is associated with
   }
<script>

obojdi · Accepted Answer · 2015-09-25 17:32:44Z

You cannot use same id on multiple elements. Call your functions passing ids as string parameters. This way you can set specific ids for tables and buttons. And to be able to delete elements with certain id you'll need some serialization first. Use like:

    addGoal('myTableID','myButtonID')

var i = 0

function addGoal(table, button) {
  i++;
  var x = document.createElement("table");
  x.id = table + i;
  document.body.appendChild(x);

  var y = document.createElement("tr");
  x.appendChild(y);

  var z = document.createElement("th");
  z.innerHTML = "Goal Name";
  y.appendChild(z);

  var a = document.createElement("tr");
  x.appendChild(a);

  var b = document.createElement("td");
  a.appendChild(b);

  var c = document.createElement("input");
  c.type = "text";
  c.name = "goalName";
  b.appendChild(c);

  var d = document.createElement("button");
  d.type = "button";
  d.innerHTML = "Remove Goal";
  d.id = button + i;
  d.setAttribute("onclick", "removeGoal('" + table + i + "','" + button + i + "')");
  document.body.appendChild(d);
}

function removeGoal(table, button) {
  var removeTab = document.getElementById(table);
  var parentE1 = removeTab.parentElement;
  parentE1.removeChild(removeTab);

  var removeBut = document.getElementById(button);
  var parentE2 = removeBut.parentElement;
  parentE2.removeChild(removeBut);
}

<!DOCTYPE html>
<html lang="en-US">

<head>
</head>

<body>
  <button type="button" onclick="addGoal('table','button')">Add Goal</button>
</body>

</html>

Ananthaprakash · Accepted Answer · 2015-09-25 17:40:28Z

Indexing your element is very important. As you may add multiple goals. I am not into it.

Using the same code you are using, you need to create a container element for button and table. So that, you can handle it easily.

function addGoal() {
        var div= document.createElement("div");
       var x = document.createElement("table");
       x.id = "table1";
       div.appendChild(x);

       var y = document.createElement("tr");
       x.appendChild(y);

       var z = document.createElement("th");
       z.innerHTML = "Goal Name";
       y.appendChild(z);

       var a = document.createElement("tr");
       x.appendChild(a);

       var b = document.createElement("td");
       a.appendChild(b);

       var c = document.createElement("input");
       c.type = "text";
       c.name = "goalName";
       b.appendChild(c);

       var d = document.createElement("button");
       d.type = "button";
       d.innerHTML = "Remove Goal";
       d.id = "button1";
       d.setAttribute("onclick", "removeGoal(this)");

       div.appendChild(d);

       document.body.appendChild(div);
   }

   function removeGoal(el) {

     document.body.removeChild(el.parentElement);
   }

<html lang="en">
  <head>
    <title>Page Title</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatibile" content="IE-edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="netguru recruitment task">
  </head>
  <body>
    <button type="button" onclick="javascript:addGoal()">Add Goal</button>
    <script>
      
    </script>
  </body>
</html>

Thank you for the answer. But this is removing only the button and not the div as a whole. Can there be another parameter in the removeGoal() function along with el to remove the div element?

Collectives™ on Stack Overflow

How to delete a specific dom table in javascript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related