Deleting a row from an HTML table in javascript

Question

I have javascript code that manages an HTML table. The code needs to be able to delete a row from an HTML table.

I am currently using the following code to delete the row:

var rowToDelete = ...;

if (rowToDelete)
    rowToDelete.remove();

This works fine in Firefox & Chrome, however, when I load the page in IE 11 & bring up the javascript debugger, it displays

Object doesn't support property or method 'remove'

I haven't tried this code in earlier versions of IE yet.

How can I do this in a cross-browser manner? My page does have jQuery included so I can use a jQuery method.

what is rowToDelete? is it a dom element or jQuery wrapper object — Arun P Johny
– Arun P Johny, Commented Dec 20, 2013 at 15:58
It is a Node element. Chrome supports .remove() on elements. He should do rowToDelete.parentNode.removeChild(rowToDelete); — A1rPun
– A1rPun, Commented Dec 20, 2013 at 16:00

A1rPun · Accepted Answer · 2013-12-20 16:09:11Z

3

Chrome supports .remove() on elements.
You should do:

rowToDelete.parentNode.removeChild(rowToDelete);

If you want this functionality in IE you can add the function to the HTMLElement prototype.

HTMLElement.prototype.remove = function (){
    this.parentNode.removeChild(this);
}

edited Dec 20, 2013 at 16:09

answered Dec 20, 2013 at 16:03

A1rPun

17k8 gold badges60 silver badges93 bronze badges

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

3 Comments

patel.milanb Over a year ago

sorry, did not understand at the first instance.. +1 for this

cookie monster Over a year ago

Interestingly, FF doesn't seem to return the removed element like Chrome does. I'm pretty sure the spec requires this. I'll have to go back and check.

cookie monster Over a year ago

...looks like undefined is the correct result. I guess it makes sense since you'd already have the node.

Ringo · Accepted Answer · 2013-12-20 16:00:13Z

1

Make sure your rowToDelete is an jQuery Object, like this:

var rowToDelete = $('tr');
rowToDelete.remove();

answered Dec 20, 2013 at 16:00

Ringo

3,9873 gold badges25 silver badges38 bronze badges

1 Comment

Tony Vitabile Over a year ago

rowToDelete was a DOM element, but I did have easy access to a jQuery object for the same DOM element without having to call jQuery again to get one. This works. Thanks.

Danny · Accepted Answer · 2013-12-20 16:05:56Z

0

If it is a dom element you can do

$(rowToDelete).remove();

answered Dec 20, 2013 at 16:05

Danny

7,5379 gold badges49 silver badges71 bronze badges

Collectives™ on Stack Overflow

Deleting a row from an HTML table in javascript

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related