Delete table in all the rendering pages of a single page in Javascript

Question

I am having a table like:

<table id="toc" class="toc" border="1" summary="Contents">
</table>

in many pages. All these pages are rendered in a single page. When I apply the javascript to delete that using on load with the below:

var tbl = document.getElementById('toc');
if(tbl) tbl.parentNode.removeChild(tbl);

Only one table is deleted and not the others. I am trying to delete the tables in all the rendering pages using javascript. How to do this?

Edit : I myself found the solution window.onLoad = load(); function load(){var tbl = document.getElementById('toc'); if(tbl) tbl.parentNode.removeChild(tbl);}

Thanks for everyone helped..

Answer 1

An ID is a unique identifier, which basically means: There can be only one.

Try looking up by tagname (table) instead and comparing the classname.

var allTables = document.getElementsByTagName('table');

for (var i = 0; i < allTables.length; i++) {
    // Array.indexOf may not be available, see
    // https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Array/indexOf

    if (allTables[i].className.split(' ').indexOf('toc') != -1) {
        var node = allTables[i];
        node.parentNode.removeChild(node);
    }
}