How to delete dynamically created table in javascript?

Question

<script>
function onButtonClick()
{
var table1 = document.createElement('table');

    for(i=0;i<3;i++)
    {

    var td1 = document.createElement('td');
    var text1 = document.createTextNode(a[i]);
    td1.appendChild(text1);
    tr.appendChild(td1);
    td1.style.borderStyle = "solid";
    td1.style.padding = "10px";
    }

}
</script>

So whenever button is clicked the table row is appended.How to delete row or table after function has been loaded once.I wanted to replace old value of a[i] with new value of a[i]

I wanted to delete the table containing old values of a[i], so that it can accumulate new array values of a[i]. — Riddhi Akbari, Jun 02 '17 at 17:52
just a simple google search and you can find many good examples, maybe next time you can do some research first? https://www.w3schools.com/js/js_htmldom_nodes.asp — Charlie Ng, Jun 02 '17 at 17:55

score 0 · Answer 1 · answered Jun 02 '17 at 17:53

You will need to give each of your table elements a unique id:

table1.setAttribute("id", "<your id here>");

Then you can remove the table by accessing it via it's id and unsetting its outerHTML property:

document.getElementById("<table id here>").outerHTML = "";

score 0 · Accepted Answer · answered Jun 02 '17 at 17:55

You need to set ID for your table such as:

var table1 = document.createElement('table');
table1.setAttribute("id", "DynamicTable");

**Here

DynamicTable

is the element ID defined by you. Rename it as your preference.

And then remove element by their ID. To remove elements by ID, have a look at this: https://stackoverflow.com/a/18120786/4190159

How to delete dynamically created table in javascript?

2 Answers2