CODEWITHSUNDEEP
javascriptjquery
donguy76
donguy76

Reputation: 640

JavaScript : Delete dynamically created table

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 = "";

Upvotes: 0

Views: 3084

Answers (2)

Yatrix
Yatrix

Reputation: 13795

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.

Upvotes: 1

Will Reese
Will Reese

Reputation: 2841

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];
}

Upvotes: 3

Related Questions