Remove Table Row by Class Name - Javascript

Question

I've looked through so many forum posts about this simple piece of code. And tried many variations and methods with nothing working.

I have a script that builds a table based on a database query. I limit it to 10 results and provide forward and back buttons to go to other results from the database. When you press the next button, I need it to delete all the current table rows so it can recreate them with the new results of the query. I am using the following code to remove the rows;

if (document.getElementsByClassName('shiftTrRow')) {
    table = document.getElementById('resultsTable')
    deleteRow = document.getElementsByClassName('shiftTrRow');
    table.removeChild(deleteRow);       
}

I use the if case to check if there are any rows to delete, I've added an alert to test if there are rows discovered and this works.

When I run the code I receive the following error on the line:

table.removeChild(deleteRow)

Uncaught Error: NOT_FOUND_ERR: DOM Exception 8

I've looked up the error code and it explains that the element couldn't be found, but this cannot be the case since this code will only execute if the element is found. If anyone knows what I'm doing wrong or a better way to do this I would really appreciate it.

deleteRow = document.getElementsByClassName('shiftTrRow')[0]; ? — Benjamin Gruenbaum
– Benjamin Gruenbaum, Commented Aug 5, 2012 at 15:50
Just tried that and still receive the same error. What is [0] for exactly? — Mitch
– Mitch, Commented Aug 5, 2012 at 15:52
I've written all the scripts using pure JavaScript I wasn't sure if you can or how you can add jQuery into the middle of JavaScript though if I remember right you can interchange between the two, but anyway I haven't started learning any jQuery yet as I started with JavaScript only and would prefer to master that first. — Mitch
– Mitch, Commented Aug 5, 2012 at 16:00
That's perfectly fine, it's just that usually somebody suggests dropping it all and rewriting the whole thing with jQuery instead of giving a proper answer ;-) — Niko
– Niko, Commented Aug 5, 2012 at 16:16

Zeta · Accepted Answer · 2012-08-05 15:53:51Z

2

document.getElementsByClassName will return a NodeList, not a single node. You'll need to chose a node from that list, for example document.getElementsByClassName('shiftTrRow')[0].

Also make sure that the node is actually a child of the given table. The following code is a little bit more exception safe:

if (document.getElementsByClassName('shiftTrRow'))
{    
    deleteRow = document.getElementsByClassName('shiftTrRow')[0];

    if(deleteRow.parentNode)
        deleteRow.parentNode.removeChild(deleteRow);
}

answered Aug 5, 2012 at 15:53

Zeta

106k13 gold badges205 silver badges249 bronze badges

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

Comments

Bergi · Accepted Answer · 2012-08-05 15:58:31Z

1

document.getElementsByClassName('shiftTrRow')
                   ^

returns a NodeList, i.e. an array of elements. You will need to loop over them and remove every of them on its own (but watch out, the collection is live and will shrink while you remove the elements).

Also, the getElementsByClassName may return elements that are no rows of that table at all, resulting in the NOT FOUND exception you receive.

However, the simplest way to remove rows from a table is its deleteRow method:

var table = document.getElementById('resultsTable');
while (table.rows.length > 0)
    table.deleteRow(0);

edited Aug 5, 2012 at 15:58

answered Aug 5, 2012 at 15:52

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

3 Comments

Mitch Over a year ago

Interesting, I have hard coded the Title row which I'm guessing would be row 0. So I imagine I would need to change 0 to 1 and it would give the desired effect?

Bergi Over a year ago

Yes, exactly. I just wanted to amend the answer that you can preserve the first rows by using a higher number than 0 :-)

Mitch Over a year ago

Ok I tried that out and it removed all the rows except for the title so that's the perfect solution thank you! The next part of my code doesn't work now but I will work on it and see if I can fix it. Thanks again!

Brian Ustas · Accepted Answer · 2012-08-05 15:52:56Z

1

document.getElementsByClassName returns an array of elements. table.removeChild expects a DOM element, not an array, for its argument.

answered Aug 5, 2012 at 15:52

Brian Ustas

66k3 gold badges30 silver badges22 bronze badges

1 Comment

Mitch Over a year ago

Ahh I understand, so even using this method I can't remove all the rows without using a loop? Still adding the [0] didn't resolve it so there must still be a problem somewhere.

Collectives™ on Stack Overflow

Remove Table Row by Class Name - Javascript

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related