JavaScript - extremely confused on removing elements from Container

Question

I\'m making a 2D, top-down Zelda style web rpg single player in JavaScript.

When the player (purple shirt) walks near a cat, it will \"rescue\" it... which basically rem

Answer 1

I am not entirely sure whatever if this is the case (I can't know it without taking a look at your whole program), but it could be this:

I assume that your "ContainerOfAnimals" is a HTML element and that you are retrieving it's child nodes using it's .children -property. The thing is that .children -property returns a "live list"!

Let me demonstrate:

var children = ContainerOfAnimals.children;
console.log(children.length) // 2;

ContainerOfAnimals.removeChild(children[0]);
console.log(children.length) // 1;

Let's say that you remove the very first child of ContainerOfAnimals. What happens? The children -list has now changed so that the second element becomes the first element, third element becomes the second element etc...

You could fix this by using a static array containing all the children and like this:

var children = [].slice.call(ContainerOfAnimals.children);
console.log(children.length) // 2;

ContainerOfAnimals.removeChild(children[0]);
console.log(children.length) // 2;

Now removing the element from the DOM -tree does not remove the element from the children array (which is static). Remember, that [].slice.call does not work in IE8 or lower.

Let me know if this was the problem. I have not enough points to comment, so I had to make a full post :)

Answer 2

HY,

Try for statement like this:

for(var z = rescuedTotal_Array.length; z >= 0; z-- )

If you noticed I just turned it around. It starts at the and going backwards. It is stupid but, maybe this error is just that :)

Let me know how it goes!

Regards

Answer 3

Beware that EaselJS elements aren't DOM elements.

Supposing you want to remove an element by its id, I'd suggest this :

function removeElementById(container, id) {
   for (var i=container.getNumChildren(); i-->0;) {
       if (container.getChildAt(i).id===id) {
            container.removeChildAt(i);
            return true;
       }
   }
   return false;
}

But using the id might not be the best architectural solution. In my EaselJS program I keep a reference to the objects themselves so that I don't have to search them.

Answer 4

It may be possible that your rescuedTotal_Array is an associative Array (or was morphed to one) and could contain something like:

rescuedTotal_Array = [1:object,2:object,object:object]

The array above has the length of 3. But you cannot access the third element via index 2, because its index is some kind of object.

Try to dump the content of your rescuedTotal_Array before accessing it (so you can see if everything is ok). This is not a solution, but it may help you so that you can find the error by yourself. Use something like

for (index in rescuedTotal_Array) {
    if (rescuedTotal_Array.hasOwnProperty(index)) {
        console.log(rescuedTotal_Array[index]);
    }
    else {
        console.log("no entry found for index: "+index);
    }
}