javascript - 谷歌浏览器扩展删除元素

Question

我正在尝试从第三方网站上的 div 中删除一个元素。

如

<div id="full_size_photo">
  <img src="img1">
  <img src="img2">
</div>


var imageDiv  = document.getElementById("full_size_photo");
imageDiv.removeChild(imageDiv.childNodes[i]);

imageDiv 显然有 5 个孩子？:S 当 i 为 1 时，img1 被正确删除。当我删除 3 和 4 img2 被删除...

有人能解释这是为什么吗？

据我了解，我认为第一个 img 标签是 0，第二个是 1？

Answer 1

空白延伸是textNode实例

注释示例：

<div id="full_size_photo">[node 1 --
--]<img src="img1">[node 3 --
--]<img src="img2">[node 5 --
]</div>

这是您真正想做的事情：

var div = document.getElementById("full_size_photo");
var images = div.getElementsByTagName("img");
div.removeChild(images[0]);

希望这可以帮助！

Answer 2

最有可能的是，节点之间的文本节点img是让你绊倒的原因。尝试这样的事情：

var imgList = imageDiv.getElementsByTagName('img');
for (var i = imgList.length - 1; i >= 0; i--) {
  imageDiv.removeChild(imgList[i]);
}

这里需要注意两点：

• 我们只是搜索作为节点的子img节点，而不是所有子节点
• 我们正在向后循环，因为我们正在删除节点（否则，在删除节点 1 后，我们会将索引增加到 2，但之前位于位置 2 的节点现在位于位置 1，因此将被跳过）。