javascript removes only every second element

Question

I've discovered a Problem ... I'm writing a userscript for grease- and tampemonkey which should change a websites look.

One of my tasks is to remove every image with the title New Post
(<img src="..." title="New Post" alt="...">)

i have the following snipplet:

elements = document.getElementsByTagName('img');

alert(elements.length); // FIRST

for (i=0; i < elements.length; i++) {
    image = elements[i];

    if (image.title.search(/New\ Post/) > -1) {
        image.remove();
    }
}

alert(i); // SECOND

This snipplet removes images, but only every second. The first alert gives me the number 19 but the second alert gives 10 ...

The script should delete every image tag with the given title. What i'm doing wrong?

Answer 1

Because document.getElementsByTagName('img') returns a live list, that means when you call remove() on an element in the returned list the removed item will get removed from the array also.

document.getElementsByTagName

Returns an HTMLCollection of elements with the given tag name. The complete document is searched, including the root node. The returned HTMLCollection is live, meaning that it updates itself automatically to stay in sync with the DOM tree without having to call document.getElementsByTagName() again.

try

var log = (function() {
  var $log = $('#log');
  return function(msg) {
    $('<p/>', {
      text: msg
    }).appendTo($log)
  }
})();


var elements = document.getElementsByTagName('img');

log('initial: ' + elements.length);

for (i = 0; i < elements.length;) {
  image = elements[i];

  if (image.title.search(/New\ Post/) > -1) {
    image.remove();
    log('remove: ' + elements.length);
  } else {
    i++
    log('not: ' + elements.length);
  }
}

log('end: ' + elements.length);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img title="New Post" src="//placehold.it/64/fff000" />
<img title="New1 Post" src="//placehold.it/64/000fff" />
<img title="New Post" src="//placehold.it/64/fff000" />
<img title="New1 Post" src="//placehold.it/64/000fff" />
<img title="New Post" src="//placehold.it/64/fff000" />
<img title="New1 Post" src="//placehold.it/64/000fff" />

<div id="log"></div>