Trying to remove an DOM table using javascript

Question

I have a program that creates a table every time I press a button.

The page keeps creating duplicate tables on click.

I am trying to delete/remove/replace the table if it exists but it doesn't do anything.

I have tried the following code

document.getElementById("paragraphDOM").outerHTML = "";
            document.getElementById("paragraphDOM").remove();
            document.getElementById("paragraphDOM").removeChild(tbl);
            document.getElementById("paragraphDOM").blur;
            document.getElementById("paragraphDOM").innerHTML = "";

None of these gets rid of the original table, I even tried creating a paragraph and adding the table to it and then removing it as I got an error trying to set outer html to "" that it needed a parent.

Check the return of getElementById before using it, it may not be valid. — SPlatten
– SPlatten, Commented Jan 15, 2019 at 13:27

Alnitak · Accepted Answer · 2019-01-15 13:37:30Z

1

If you're using MSIE you have to reference the table's parent to be able to remove the node:

let table = document.getElementById('#mytable');
let parent = table.parentNode;
parentNode.removeChild(table);

otherwise in all other current browsers you should be able to just use .remove:

let table = document.getElementById('#mytable');
table.remove();

See also caniuse.com for more detailed browser support information.

edited Jan 15, 2019 at 13:37

answered Jan 15, 2019 at 13:28

Alnitak

341k72 gold badges420 silver badges503 bronze badges

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

3 Comments

Robert Over a year ago

I created the following page

Robert Over a year ago

The js for what you gave me is jsfiddle.net/rvermaak/2qp01wno/3 But my page jsfiddle.net/rvermaak/humnoejL/3 Keeps creating more tables I know it has to be something stupid I'm doing , but I can't see it.

Alnitak Over a year ago

@Robert your fiddle doesn't work, and it's far too long for me to bother debugging. please create a small self contained example with the bare minimum of code that demonstrates the issue. Chances are you'll spot what you've done wrong then anyway...

Osama · Accepted Answer · 2019-01-15 13:31:28Z

0

Just use parentNode to define the parent of table then apply removeChild() on it

var tbl=document.getElementById("paragraphDOM");
if(tbl) tbl.parentNode.removeChild(tbl);

answered Jan 15, 2019 at 13:31

Osama

3,0301 gold badge15 silver badges16 bronze badges

Comments

Headbank · Accepted Answer · 2019-01-15 13:35:34Z

0

As long as your variable tbl is correctly defined as the table you want to remove, this will remove it:

tbl.parentNode.removeChild(tbl);

If you already have the new table ready to replace tbl, let's call it newTbl here, you can simply do this:

tbl.parentNode.replaceChild(newTbl,tbl);

answered Jan 15, 2019 at 13:35

Headbank

4124 silver badges9 bronze badges

Collectives™ on Stack Overflow

Trying to remove an DOM table using javascript

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related