How to delete all tables in HTML with JavaScript?

Question

I have a list of 6 numbers and I have a list containing 4 lists. I want to put the first 3 numbers in the first list and the next 2 numbers in the list after it and finally the last number in the list of 6 in the last list of lists. I know this is confusing but here is my code to visualize it :

Start_Comparing_Index = -1
Looping_Counter = 4 # = 4
for counter in range(4):
Looping_Counter -= 1  # =3
Start_Comparing_Index += 1  # = 0
print("counter = " + str(counter))
for i in range(Looping_Counter):
    s[counter].append(x[Start_Comparing_Index])
    print("Comp index= " + str(Start_Comparing_Index))
    if i == range(Looping_Counter)[-1]:
        break
    else:
        Start_Comparing_Index += 1
print(s) 


but its printing out :

counter = 0
Comp index= 0
Comp index= 1
Comp index= 2
counter = 1
Comp index= 3
Comp index= 4
counter = 2
Comp index= 5
counter = 3
[[1, 2, 3, 4, 5, 6], [1, 2, 3, 4, 5, 6], [1, 2, 3, 4, 5, 6], [1, 2, 3, 4, 5, 6]]

Although I want it to print this list instead:

[[1,2,3],[4,5],[6]]

What is wrong with my code?

Solution 1

Very simple version:

var tables = document.getElementsByTagName("TABLE");
for (var i=tables.length-1; i>=0;i-=1)
   if (tables[i]) tables[i].parentNode.removeChild(tables[i]);

Solution 2

Danger! getElementsByTagName returns a ‘live’ NodeList. In Joel's code, removing element 0 moves the items in the list down so that when you remove element 1, you've missed one.

Possible alternatives: if you know you're always going to be removing every element, you can use a while-loop:

var tables= document.getElementsByTagName('table');
while (tables.length>0)
    tables[0].parentNode.removeChild(tables[0]);

Or, if you might or might not remove, but iteration order is unimportant, go through the list backwards:

var tables= document.getElementsByTagName('table');
for (var i= tables.length; i-->0;)
    tables[i].parentNode.removeChild(tables[i]);

If you might-or-might-not remove and you need to iterate forwards, you're in the tedious position of having to copy the list:

function toArray(l) {
    var a= [];
    for (var i= 0; i<l.length; i++)
        a[i]= l[i];
    return a;
}

var tables= toArray(document.getElementsByTagName('table'));
for (var i= 0; i<tables.length; i++)
    ...

Solution 3

If you're using jQuery it is pretty easy ...

$(document).ready(function() {
  $("table").remove();
});

not sure how's you do it in other libraries.

if you're not using a js library, you should be.

Solution 4

Or:

function myF() {
    this.checkChild = function(tagN, node) {
        if (node.tagName.toLower() == tagN.toLower()) {
            node.parentNode.removeChild(node);
        }
        else {
            var i;
            for(i = 0; i < node.childNodes.length; i++)
                this.checkChild(tagN, node.childNodes[i]);
        }
    }
}

Usage:

var m = new myF();
m.checkChild("The name of the tagname. This case: table", document.body); 
 

Good luck!

View more solutions

Comments

[Mahmoud Ayman]

sorry the title doesn't have anything to do with the code and x =[1,2,3,4,5,6] and s = [[]]*4

[logc]

Edited the title since you yourself commented that it hasn't anything to do with the question body (?)

[tvanfosson]

This will do it when the document loads. If you want to do it later, use $('table').remove() in an event handler.

[ashokgelal]

@tvanfosson: Could you please elaborate it a bit? Also I'm using wordpress blog? How can I load jquery library?

[roenving]

Why use a library of thousands of lines if you have a need for removing some tables ?-) As Joel Coehoorn shows it is only three lines of code, though they are some longer as they would be using jQuery ...

[Amit Patil]

Agreed. It's the StackOverflow disease, you can't ask a simple JavaScript question without the fanboys jumping in to hype up their favourite framework. Please stop. Frameworks can be great, sure, but no-one's going to pull in that insane weight of code for a one-liner.

[Amit Patil]

This will miss alternate tables — see comment below for the gories.

[Ben Combee]

If you're already using a framework, seeing how to do it with that is useful. I'm fine with those kinds of answers.

[Kyle West]

The jQuery library is 15kb .. hardly massive. Furthermore, I've never seen a web application that has just one use of javascript. Sure in this example it may be just one example, but I'd put money on the next couple of questions will be, OK, tables are done, how do I do x?

[aylnon]

I think having a library approach in addition to pure JS approaches is constructive.

[rp.]

No fanboy here. Just a rational coder. It's insane to NOT use jQuery. It doesn't only do things better, it does them better across browsers.

[Mahmoud Ayman]

Because I want it to be a generic code because sometimes I don't want to take just the 3 elements but want to take 4 or 5 depending on a certain variable I can extract from a data the user inputs.

[Mahmoud Ayman]

Yo Ferhat I think that have solved my problem and what I wanted. I'll edit that code to satisfy my exact needs thank you very much & help appreciated :)

[logc]

Then your question should state those conditions.

[Mahmoud Ayman]

sorry man it's my first time on here didn't know next time i'll be sure to add it. Thanks for your efforts to help me,appreciated :)