2

我正在尝试使用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]);
}
4

2 回答 2

2 
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();
于 2012-06-04T23:26:54.557 回答
1

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");
于 2012-06-05T00:09:01.073 回答