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.

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.

• javascript
• dom

• 1 deleteRow = document.getElementsByClassName('shiftTrRow')[0]; ? – Benjamin Gruenbaum Commented Aug 5, 2012 at 15:50
• Just tried that and still receive the same error. What is [0] for exactly? – Mitch Commented Aug 5, 2012 at 15:52
• 8 minutes and nobody suggested jQuery? WOW! – Niko Commented Aug 5, 2012 at 15:54
• 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 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 Commented Aug 5, 2012 at 16:16

3 Answers 3

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

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);

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