removing item from array

I have 2 arrays & 2 checkbox repeaters: the second gets populated w/ items selected from the first. I can add the items no problem. How do I then delete the item if it gets deselected from the first checkbox repeater?

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx" 
        creationComplete="updateOlder();"
         >
<fx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;

        [Bindable]
        public var older:ArrayCollection  = new ArrayCollection ([]);

        [Bindable]
        public var newer:ArrayCollection  = new ArrayCollection ([]);

        private function updateOlder():void{
            older.addItem({label:"item1",desc:"desc1"});
            older.addItem({label:"item2",desc:"desc2"});
            older.addItem({label:"item3",desc:"desc3"});
        }

        private function updateNewer(evt:MouseEvent):void{
            if(evt.target.selected) {
                // add item to array    
                newer.addItem({ label:evt.currentTarget.label,     desc:evt.currentTarget.data });
                newer.refresh();
            } 
            else {
                // remove item from array
                newer.removeItemAt( newRepeater.currentIndex.valueOf() );
                newer.refresh();

            }
        }
    ]]>
</fx:Script>

<mx:HBox width="100%" height开发者_StackOverflow中文版="100%">
<mx:VBox width="100%" height="100%">
    <mx:Repeater id="oldRepeater" dataProvider="{older}">
        <mx:CheckBox color="black" fontFamily="Arial" fontSize="14"
                     label="{oldRepeater.currentItem.label}" 
                     data="{oldRepeater.currentItem.desc}" 
                     click="updateNewer(event);"
                     />
    </mx:Repeater>
</mx:VBox> 
    <mx:VBox width="100%" height="100%">
    <mx:Repeater id="newRepeater" dataProvider="{newer}">
        <mx:CheckBox color="red" fontFamily="Arial" fontSize="14"
                     label="{newRepeater.currentItem.label}"
                     data="{newRepeater.currentItem.desc}" 
                     />
    </mx:Repeater>
</mx:VBox> 
</mx:HBox>


</mx:Application>

Repeater.currentIndex property is not -1 only while the Repeater iterates through its' dataProvider. here's your code working:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx" 
        creationComplete="updateOlder();"
         >
<fx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        import flash.events.MouseEvent;
        import mx.controls.CheckBox;
        import mx.core.Repeater;
        [Bindable]
        public var older:ArrayCollection  = new ArrayCollection ([]);
        [Bindable]
        public var newer:ArrayCollection  = new ArrayCollection ([]);

        private function updateOlder():void{
            older.addItem({key:'item1',val:'desc1'});
            older.addItem({key:'item2',val:'desc2'});
            older.addItem({key:'item3',val:'desc3'});
        }

        private function updateNewer(evt:MouseEvent):void {
            var tmpBox:CheckBox = evt.target as CheckBox;
            if(tmpBox.selected) {
                // add item to array   
                newer.addItem({key:tmpBox.label,val:tmpBox.data});
            } 
            else {
                // remove item from array
                var newArrIndex: int = getArrayElementIndex(newer, older[tmpBox.instanceIndex]);
                if(newArrIndex != -1){
                    newer.removeItemAt(newArrIndex);
                }
            }
            newer.refresh();
        }

        private function getArrayElementIndex(arr:ArrayCollection, elementValue:Object):int{
            for (var retInd: int = 0; retInd < arr.length; retInd++) {
                if (arr[retInd]['key'] == elementValue['key'] && arr[retInd]['val'] == elementValue['val']) {
                    return retInd;
                }
            }
            return -1;
        }       
    ]]>
</fx:Script>

<mx:HBox width="100%" height="100%">
<mx:VBox width="100%" height="100%">
    <mx:Repeater id="oldRepeater" dataProvider="{older}">
        <mx:CheckBox color="black" fontFamily="Arial" fontSize="14"
                     label="{oldRepeater.currentItem['key']}" 
                     data="{oldRepeater.currentItem['val']}" 
                     click="updateNewer(event);"
                     />
    </mx:Repeater>
</mx:VBox> 
    <mx:VBox width="100%" height="100%">
    <mx:Repeater id="newRepeater" dataProvider="{newer}">
        <mx:CheckBox color="red" fontFamily="Arial" fontSize="14"
                     label="{newRepeater.currentItem['key']}"
                     data="{newRepeater.currentItem['val']}" 
                     />
    </mx:Repeater>
</mx:VBox> 
</mx:HBox>
</mx:Application>