Script yielding inconsistent results

[martix]

Code: Select all

var arr = document.getElementsByTagName('iframe');
var i, len = arr.length;
for ( i = 0; i <= len; i++ ) {arr[i].parentNode.removeChild( arr[i] );}

The problem is it does not work on all the elements on the page.
It removes some of them on a random base and then gives this error: "arr[i] has no properties".
I did an experiment with the script - added it as a bookmarklet, which showed that executing multiple instances of it does remove all elements. Question is why doesn't one run do all the work?

[rangana]

Hi martix,

Good day!

I assumed that the iframed removed are only those that belong to the "odd" indeces. Iframe[0], iframe[2], iframe[4]...

I've observed this problem too when using the removeChild() property.

The best fix for this is to save all of the iframe in a different array, then call a function that will loop on that array and use removeChild() instead.

See if it helps. If you're still stumped, get back to us.

[martix]

And how would this be different from I already did?
I put the iframes in an array and then loop the array to remove them one by one.
Stupid bug.
Another thing I have no idea about is why execution stops after the loop.
I added a simple alert after and it didn't show up. Guess the loop does not complete actually.
I added an alert(i); inside the loop - goes 0, 1, 2 and thats it for the loop of 6... Guess the computer has another idea about counting properly. Lol...

Here's the thing though:

Code: Select all

for ( i = 0; i <= len; i++ ) {arr[i].parentNode.removeChild( arr[i] );}

- Not working

Code: Select all

for ( i = len-1; i >= 0; i-- ) {arr[i].parentNode.removeChild( arr[i] );alert(i);}

- Working.
If only I knew what the difference is...
.....(besides the obvious reverse in the loop of course).

[rangana]

The difference is that you have a complete copy of all the frames before you remove them from the document.

The later code that you've provided is a reverse loop. It starts with the total number of frames and remove them in reverse order. That means that the last frame is first removed...and the first frame is the last to remove.

[martix]

DUH!....
I said besides the reverse in the loop.

And I am a newbie in JS(not in general programing though).
Do you mean to tell the code I have here does not store them in the array before hand and if so - mind showing me a piece that does?

[rangana]

I haven't tested this, but might work:

Code: Select all

var arr = document.getElementsByTagName('iframe'),temp[];
var i, len = arr.length;
for ( i = 0; i <= len; i++ )
   temp.push(arr[i]);
removeEl();

/*removeEl Func*/
function removeEl() {
   for(var i = 0 ; i<temp.length; i++) {
      temp[i].parentNode.removeChild(temp[i]); // remove the frames
      // temp[i].removeNode(); // You could also try this
   }
}


I missed the part that you said "besides..." you've reduced the font-size giving me difficulty to read it on my normal view.

[martix]

I see what you meant, but since I am new to JS I don't know the specifics of the language, but on first sight I'd say your just makes a redundant copy of the array.
As I said the script - with the reversed loop works now. I'm just trying to learn a bit whats the difference between my array and your 2 arrays.

[rangana]

No, it doesn't make a redundant copy, but instead, it ensures that all the elements are stored in the array already before we remove each of them in our nodes.

I prefer your recent script (reverse loop) than mine.

I had to learn something new each time