Total newbie to Spine and to HTML5 game development.

I am using Pixi.js to develop a simple game and spine animations supplied to me by a client.

I have one animation that is of a drawer opening and a carrot popping out of the drawer.

The final frame of the animation has this carrot displayed.

I would like to remove this carrot when a user clicks on it.

What code would be required to do this. Here is my spine data for the drawer

The element I want to hide/remove is "HiddenCarrot"


{
"bones": [
   { "name": "root-Table" },
   { "name": "Drawer-bone", "parent": "root-Table", "length": 37.46, "x": 311.84, "y": -41.04, "rotation": -7.68 },
   {
      "name": "Carrot_Table-bone",
      "parent": "Drawer-bone",
      "length": 101.2,
      "x": 30.07,
      "y": 13.82,
      "scaleX": 0.5,
      "scaleY": 0.5,
      "rotation": -161.31
   }
],
"slots": [
   { "name": "Bedroom_Table", "bone": "root-Table", "attachment": "Bedroom_Table" },
   { "name": "Bedroom_Table-Drawer", "bone": "Drawer-bone", "attachment": "Bedroom_Table-Drawer" },
   { "name": "Bedroom_Table-DrawerOverlay", "bone": "Drawer-bone", "attachment": "Bedroom_Table-DrawerOverlay" },
   { "name": "Bedroom_Table-Cover", "bone": "root-Table", "attachment": "Bedroom_Table-Cover" },
   { "name": "HiddenCarrot", "bone": "Carrot_Table-bone" }
],
"skins": {
   "default": {
      "Bedroom_Table": {
         "Bedroom_Table": { "x": 344, "y": -84, "width": 178, "height": 190 }
      },
      "Bedroom_Table-Cover": {
         "Bedroom_Table-Cover": { "x": 344, "y": -84, "width": 178, "height": 190 }
      },
      "Bedroom_Table-Drawer": {
         "Bedroom_Table-Drawer": { "x": 27.19, "y": 11.74, "rotation": 7.68, "width": 136, "height": 61 }
      },
      "Bedroom_Table-DrawerOverlay": {
         "Bedroom_Table-DrawerOverlay": { "x": 27.19, "y": 11.74, "rotation": 7.68, "width": 136, "height": 61 }
      },
      "HiddenCarrot": {
         "HiddenCarrot": { "x": 6.95, "y": -16.63, "rotation": 169, "width": 216, "height": 103 },
         "HiddenCarrot-masked1": { "x": 6.95, "y": -16.63, "rotation": 169, "width": 216, "height": 103 },
         "HiddenCarrot-masked2": { "x": 6.95, "y": -16.63, "rotation": 169, "width": 216, "height": 103 }
      }
   }
},
"animations": {
   "animation": {
      "slots": {
         "HiddenCarrot": {
            "attachment": [
               { "time": 0, "name": "HiddenCarrot" }
            ]
         }
      },
      "bones": {
         "Drawer-bone": {
            "rotate": [
               { "time": 0, "angle": 0 }
            ],
            "translate": [
               {
                  "time": 0,
                  "x": 0,
                  "y": 0,
                  "curve": [ 0.358, 0.01, 0.538, 1 ]
               },
               {
                  "time": 0.1666,
                  "x": 1.56,
                  "y": 0.6,
                  "curve": [ 0.45, 0, 0.518, 0.97 ]
               },
               {
                  "time": 0.6666,
                  "x": -46.57,
                  "y": -16.21,
                  "curve": [ 0.312, 0.01, 0.544, 1 ]
               },
               { "time": 0.8333, "x": -45.47, "y": -15.47 }
            ]
         },
         "Carrot_Table-bone": {
            "rotate": [
               {
                  "time": 1,
                  "angle": 0,
                  "curve": [ 0.25, 0, 0.955, 0.42 ]
               },
               { "time": 1.1666, "angle": -14.29 },
               {
                  "time": 1.2,
                  "angle": 340.68,
                  "curve": [ 0.138, 0.7, 0.75, 1 ]
               },
               {
                  "time": 1.3333,
                  "angle": 337.09,
                  "curve": [ 0.378, 0.01, 0.53, 0.94 ]
               },
               { "time": 1.4666, "angle": -22.9 }
            ],
            "translate": [
               {
                  "time": 1,
                  "x": 0,
                  "y": 0,
                  "curve": [ 0.25, 0, 0.955, 0.42 ]
               },
               { "time": 1.1666, "x": -1, "y": 4.69 },
               {
                  "time": 1.2,
                  "x": -6.24,
                  "y": 18.84,
                  "curve": [ 0.138, 0.7, 0.75, 1 ]
               },
               {
                  "time": 1.3333,
                  "x": -14.82,
                  "y": 32.91,
                  "curve": [ 0.378, 0.01, 0.53, 0.94 ]
               },
               { "time": 1.4666, "x": -14.52, "y": 30.72 }
            ]
         }
      },
      "draworder": [
         {
            "time": 0,
            "offsets": [
               { "slot": "HiddenCarrot", "offset": -2 }
            ]
         },
         { "time": 1.184 }
      ]
   }
}
}