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

Google Chrome扩展删除元素

2 个答案: