Расширение Google Chrome Удалить элемент

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, поэтому пропущено).