JavaScript : Delete dynamically created table

Question

I am new to web development and struggling with deleting a dynamically created table.

Below is the JavaScript function to create the table when user clicks a button.

function DrawTable(data){
                  var oTHead = myTable.createTHead();
                  var oTFoot = myTable.createTFoot();
                  var oCaption = myTable.createCaption();
                  var oRow, oCell;
                  var i, j;

                  var heading = new Array();

                  heading[0] = "AAA";
                  heading[1] = "BBB";
                  heading[2] = "CCC";
                  heading[3] = "DDD";
                  var tableData = data.split(':');

                  // Insert a row into the header.
                  oRow = oTHead.insertRow(-1);
                  oTHead.setAttribute("bgColor","lightskyblue");

                  // Insert cells into the header row.
                  for (i=0; i < heading.length; i++)
                  {
                    oCell = oRow.insertCell(-1);
                    oCell.align = "center";
                    oCell.style.fontWeight = "bold";
                    oCell.innerHTML = heading[i];
                  }

                   // Insert rows and cells into bodies.
                  for (i=0; i < tableData.length; i++)
                  {
                    var oBody = oTBody0;
                    oRow = oBody.insertRow(-1);
                    var splitData = tableData[i].split(',');
                    for (j=0; j < splitData.length; j++)
                    {
                      oCell = oRow.insertCell(-1);
                      oCell.innerHTML = splitData[j];
                    }
                  }
            }

The above code works perfectly and draws the table when user clicks on the button.

If user clicks on the button again it will draw the table again.

i.e., it will draw another header and all the rows all over again.

At this point I want to delete the existing header and rows and draw it all new.

I tried many things to delete the existing table, but nothing works.

Is there a way I can make sure that the table is not duplicated again?

UPDATE

The HTML part is:

<table id="myTable">
                <tbody ID="oTBody0"></tbody>
            </table>

ANOTHER UPDATE

I tried below and it worked.

oTHead.innerHTML = "";
oTBody0.innerHTML = "";

You're not actually creating a table here - just filling in myTable, which was presumably created elsewhere. If myTable is not being created each time, and your problem is duplicate contents, start the function off with myTable.innerHTML = "";. Just a guess, since we can't see where myTable came from. — Paul Roub
– Paul Roub, Commented Mar 27, 2015 at 0:04
Why is this question tagged jQuery when you're not using it? — Bergi
– Bergi, Commented Mar 27, 2015 at 0:12
@Bergi When you tag a question jquery, it means that the asker is requesting that you use jQuery — user3434588
– user3434588, Commented Mar 27, 2015 at 0:15
I tried this: oTHead.innerHTML = "";oTBody0.innerHTML = ""; and it worked. — donguy76
– donguy76, Commented Mar 27, 2015 at 0:18

Will Reese · Accepted Answer · 2015-03-27 00:16:42Z

3

jQuery offers a .empty() function that you can use

$("#myTable").empty();

Or with javascript you can just set the innerHTML to empty

document.getElementById("myTable").innerHTML = "";

Just execute this function before you start trying to add new content to the table.

//$("#myTable").empty();
document.getElementById("myTable").innerHTML = "";

// Insert a row into the header.
oRow = oTHead.insertRow(-1);
oTHead.setAttribute("bgColor","lightskyblue");

// Insert cells into the header row.
for (i=0; i < heading.length; i++) {
    oCell = oRow.insertCell(-1);
    oCell.align = "center";
    oCell.style.fontWeight = "bold";
    oCell.innerHTML = heading[i];
}

edited Mar 27, 2015 at 0:16

answered Mar 27, 2015 at 0:11

Will Reese

2,8512 gold badges17 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Yatrix · Accepted Answer · 2015-03-27 00:17:27Z

1

Since you're using jQuery, just do this: $('#containerIdThatYourTableSitsIn').html('');

That will clear the html of whatever element your table sits in. Then just reload it.

Edit

As the comments have mentioned, .empty() is another option.

edited Mar 27, 2015 at 0:17

answered Mar 27, 2015 at 0:03

Yatrix

13.9k17 gold badges57 silver badges83 bronze badges

5 Comments

Radio Over a year ago

Forgive me if I am wrong, but you risk getting leaky if data, events, or other references are not also cleared along with the html. $('#containerIdThatYourTableSitsIn').empty() might be safer?

Bergi Over a year ago

@Radio: No, jQuery's .html method cleans up data before overwriting the contents. But you're right, .empty() is the better choice here.

Radio Over a year ago

Yeah! it stores data as an element attribute? That would make sense. I was more worried about future click events applied to cells.

Bergi Over a year ago

@Radio: No, I said nothing about attributes. I meant that it explicitly calls jQuery.cleanData, to remove stuff like event handlers and other stuff.

Radio Over a year ago

Ah, thank you for taking the time to explain! More curious on the details, I found this, which may interest others: stackoverflow.com/questions/17543711/…

Collectives™ on Stack Overflow

JavaScript : Delete dynamically created table

2 Answers 2

Comments

Edit

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Edit

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related