谷歌浏览器扩展程序：删除元素

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？

- John O'Fish

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

希望这能帮到你！

- jimbo

---

你也可以使用nodeType属性来检测它是元素节点还是文本节点。请参阅http://www.w3schools.com/dom/prop_node_firstchild.asp获取更多信息。 - Greg Bray

你的代码更加易懂，而且你也很清晰地解释了我的问题。非常感谢。 - John O'Fish

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，因此它将被跳过）。

- pkaeding