Using Click Functions Inside ItemRenderers Causing "Undefined Method" error

Question

I have a tilelist which has an item renderer and the item renderer has a small button in it which intentionally should remove the specific item once the button is clicked making each item removable from the tilelist by clicking the little button on each item within the tilelist. However when I try to apply my removeProduct() function, which I've already defined, to the button I get the error "Call to a possibly undefined method" but this function can be applied to other buttons fine so I know it has been defined correctly. It just seems to throw this error when I try to apply it to the button inside the itemrenderer of my tilelist. Anyone else had this problem? Is it to do with it being within a item renderer?
Here's my code for the function:-
public function removeProduct():void { 
var item:Object = cartTilelist.selectedItem; 
var idx:int = shoppingCartAC.getItemIndex(item);shoppingCartAC.removeItemAt(idx);

Answer 1

forst create custom Event:
public class MyItemEvent extends Event
        public static const MY_ITEM_REMOVE:String = "MyItemEventRemove";
        private var _myItemClicked:Object;
        public function get myItem() : Object{
            return this._myItemClicked;
        public function MyItemEvent(type:String,itemParam:Object, bubbles:Boolean=true, cancelable:Boolean=false)
            super(type, bubbles, cancelable);
            this._myItemClicked = itemParam;
        override public function clone():Event{
            return new MyItemEvent(this.type,this._myItemClicked,this.bubbles,this.cancelable); // bubbling support inside
inside you Item renderer create util function (you dont have to, but its cleaner) :
private function removeItem() : void {
                this.dispatchEvent(new MyItemEvent (MyItemEvent .MY_ITEM_REMOVE,this.data,true,true));
and then third step (again inside Item renderer)  asign that function as click event handler to button:
<mx:LinkButton id="removeButton" label="X" fontSize="8"  paddingLeft="0" paddingRight="0" paddingTop="0" paddingBottom="0" cornerRadius="6" color="#FF0000" click="removeItem()"  x="1" y="-2"/>
now wherever you have your  tilelist add listiner to it following way , (or any other way you find it fit )
yourTileListComponent.addEventListener(MyItemEvent .MY_ITEM_REMOVE,
                     function(e:MyItemEvent):void
                        trace(this + "ItemTo Remove is: " + e.myItem);