jquery - JavaScript - extremely confused on removing elements from Container -

i'm making 2d, top-down zelda style web rpg single player in javascript.

when player (purple shirt) walks near cat, "rescue" it... removes animalcontainer containerofanimals (thereby removing animalcontainer's bmp stage), , add id of animalcontainer rescuedtotal_array...

the weird thing is, in pic below, i'm able rescue animalcontainer2 , then rescue animalcontainer1... if go animalcontainer1 animalcontainer2, throws

uncaught typeerror: cannot read property 'id' of undefined` error.  

... basically:

working way: id 22, id 21 ->>> 1 thing notice element name doesn't change id... not sure why... broken way... may not able associate element name animalcontainer2 id? don't know how id , name disassociated that..

id in rescued array...: 22, element name: animalcontainer1, rescued array length: 2, elem index pos: 0, index: 0  id in rescued array...: 21, element name: animalcontainer1, rescued array length: 2, elem index pos: 1, index: 0  

broken way- throws error: id 21, down id 22

id in rescued array...: 21, element name: animalcontainer1, rescued array length: 1, elem index pos: 0, index: 0   1. uncaught typeerror: cannot read property 'id' of undefined  

code snippet:

        function grabit(npc_id, index) {             //check if npcid exists in array before adding...             if ($.inarray(containerofanimals.children[index].id, rescuedtotal_array) == -1) {                 rescuedtotal_array.push(containerofanimals.children[index].id);             }             if (rescuedtotal_array.length == 2) {                 (var z = 0; z < rescuedtotal_array.length; z++) {                     console.log("id in rescued array...: " + rescuedtotal_array[z] + ", \n element name: " + containerofanimals.children[index].name + ", rescued array length: " + rescuedtotal_array.length + ",\n elem index pos: " + z + ",\n index: " + index);                 }             }             //when remove first added element rescuedtotalarray... 2nd element's index assumes first added element's index... (goes 1 0)             console.log(index);             console.log("element removed: " + containerofanimals.children[index]);             stage.update();             containerofanimals.removechild(containerofanimals.children[index]);             updatehud();         } 

i have no idea why order in store elements in array/remove them stage matter...

---

edit: feel can solve issue removing element containerofanimals element id instead of index... container object offers no getchildid() function...

so tried:

    var childtoremove = document.getelementbyid(containerofanimals.children[index]);     console.log(childtoremove);     containerofanimals.removechild(childtoremove); 

console.log(childtoremove) gives me null children

but doing this: console.log(containerofanimals.children[index].id); gives me id 21, correct id...

beware easeljs elements aren't dom elements.

supposing want remove element id, i'd suggest :

function removeelementbyid(container, id) {    (var i=container.getnumchildren(); i-->0;) {        if (container.getchildat(i).id===id) {             container.removechildat(i);             return true;        }    }    return false; } 

but using id might not best architectural solution. in easeljs program keep reference objects don't have search them.