Google Chrome Extension Remove Element

Question

I am trying to remove an element from a div on a third party website.

Such as

<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 apparently has 5 children? :S When i is 1 img1 is removed properly. When i remove 3 and 4 img2 is removed...

Would someone be able to explain why this is?

As far as I understand I thought the first img tag would be 0 and the second would be 1?

Answer 1

Whitespace stretches are textNode instances

Annotated example:

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

Here's what you really want to do:

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

Hope this helps!