javascript - 如何使用 JavaScript 删除 HTML 中的所有表格？

Question

如何删除网页中的所有表格？这些表没有任何关联的 ID。

Answer 1

非常简单的版本：

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

Answer 2

危险！getElementsByTagName 返回一个“实时”节点列表。在 Joel 的代码中，移除元素 0 会将列表中的项目向下移动，因此当您移除元素 1 时，您已经错过了一项。

可能的选择：如果你知道你总是要删除每一个元素，你可以使用一个while循环：

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

或者，如果您可能会或可能不会删除，但迭代顺序并不重要，请向后浏览列表：

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

如果您可能删除或可能不删除并且需要向前迭代，那么您将处于不得不复制列表的繁琐位置：

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++)
    ...

Answer 3

如果您使用的是 jQuery，这很容易......

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

不知道你在其他图书馆是怎么做的。

如果您不使用 js 库，则应该使用。

Answer 4

或者：

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

用法：

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

祝你好运！