Question

我正在尝试使用javascript来删除页面上的按钮或输入标签的所有内容...到目前为止，我的代码删除了其中一些，我不知道为什么。它只删除了许多中的一个复选框和2个按钮（有3个按钮）

var buttons = document.getElementsByTagName("button");
for (var j = 0; j < buttons.length ; j++)
{
    buttons[j].parentNode.removeChild(buttons[j]);
}

var checkboxes = document.getElementsByTagName("input");
for (var j = 0; j < buttons.length ; j++)
{
    checkboxes[j].parentNode.removeChild(checkboxes[j]);
}

Answer 1

var checkboxes = document.getElementsByTagName("input");
for (var j = 0; j < buttons.length ; j++) // You use the wrong variable here
{
    checkboxes[j].parentNode.removeChild(checkboxes[j]);
}

应该是;

for (var j = 0; j < checkboxes.length ; j++)

关于未删除的按钮，可能是因为它是input type="button"而不是<button>？

请注意，document.getElementsByTagName("input");将获取并删除所有输入，而不仅仅是复选框！

我建议你使用像jQuery这样的javascript库吗？你可以这样做一行代码没有问题：

$('input[type="button"], input[type="checkbox"], button').remove();

Answer 2

document.getElementsByTagName会返回直播 NodeList。这意味着，当你删除第一个元素时，a）长度减少，b）列表的（第一个）项被移动。

有两种方法可以解决这个问题：

始终删除最后一个元素。 NodeList按文档顺序排列，因此可以使用：

for (var i=buttons.length-1; i>=0; i--) // var i=buttons.length; while(i--)
    buttons[i].parentNode.removeChild(buttons[i]);

始终删除第一个元素，并且不要运行索引，直到length：

while (buttons.length) // > 0
    buttons[0].parentNode.removeChild(buttons[0]);

它也适用于jQuery和co，因为它们将NodeList项复制到静态数组中。你也可以自己做：

var staticButtons = Array.prototype.slice.call(buttons);
for (var i=0; i<staticButtons.length; i++)
    staticButtons[i].parentNode.removeChild(staticButtons[i]);

或者您使用文档选择方法立即返回静态NodeList，例如querySelector：

var staticList = document.querySelectorAll("button, input");

javascript试图删除某些标签的所有内容

2 个答案: