# CANVAS how to add or remove instances using click event **URL:** \ **Category:** Ignition\ **Tags:** ignition81, scripting, perspective\ **Created:** [June 27, 2022, 12:22pm UTC](https://forum.inductiveautomation.com/t/canvas-how-to-add-or-remove-instances-using-click-event/61236 "2022-06-27T12:22:42Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![Thiago\_Vilela](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/thiago_vilela/32/37352_2.png) [@Thiago\_Vilela](https://forum.inductiveautomation.com/u/Thiago_Vilela)\ **Post date:** [June 27, 2022, 12:22pm UTC](https://forum.inductiveautomation.com/t/canvas-how-to-add-or-remove-instances-using-click-event/61236/1 "2022-06-27T12:22:42Z")
Hello. I need to create a Python object to add or remove instances. The idea is to have a picture where the user clicks on and adds or removes an “X” mark. ---
**Author:** ![djs](https://avatars.discourse-cdn.com/v4/letter/d/e47774/32.png) [@djs](https://forum.inductiveautomation.com/u/djs)\ **Post date:** [June 27, 2022, 1:23pm UTC](https://forum.inductiveautomation.com/t/canvas-how-to-add-or-remove-instances-using-click-event/61236/2 "2022-06-27T13:23:20Z")
Right click on an automatically generated instance and copy it: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/f/7f483c2102f9fc1ea28f37134fdecceb9dde4e87.png) Paste that into the script editor and assign it to a variable . Add whatever params you need in there and append it to the `instances` prop. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/4/d47875818f214709981b0a5c272313f7f2d72552.png) If you add multiple instances using this, you will have to mess with the top/left parameters to prevent unwanted overlap. Consider using the Flex Repeater if you need positioning to be automated. ---
**Author:** ![Thiago\_Vilela](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/thiago_vilela/32/37352_2.png) [@Thiago\_Vilela](https://forum.inductiveautomation.com/u/Thiago_Vilela)\ **Post date:** [June 27, 2022, 1:29pm UTC](https://forum.inductiveautomation.com/t/canvas-how-to-add-or-remove-instances-using-click-event/61236/3 "2022-06-27T13:29:41Z")
Awesome. Great idea, thanks for the feedback, I will try both and check what fits better in my program. ---
**Author:** ![Thiago\_Vilela](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/thiago_vilela/32/37352_2.png) [@Thiago\_Vilela](https://forum.inductiveautomation.com/u/Thiago_Vilela)\ **Post date:** [June 27, 2022, 1:32pm UTC](https://forum.inductiveautomation.com/t/canvas-how-to-add-or-remove-instances-using-click-event/61236/4 "2022-06-27T13:32:59Z")
In both situations (canvas or flex repeater), how can I delete the instance if the user clicks on the “x”. For example, if I have 10 instances and the user clicks at the instance 4 to remove. ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [June 27, 2022, 1:50pm UTC](https://forum.inductiveautomation.com/t/canvas-how-to-add-or-remove-instances-using-click-event/61236/5 "2022-06-27T13:50:11Z")
Make the view that contains your X mark clickable. Give the view an id, that will appear in the instances prop of the canvas. In the onClick event, add a script. In that script, send a message, with the id of the view as payload. In your canvas, add a message handler that listens to the message sent by the X mark view. Upon reception of this message, delete the instance that corresponds to the id received in the payload. edit: forget what I just wrote, the canvas component has a `onInstanceClicked` event. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/4/b4f21abd776d126c3206f8c45c510964026ab748.png) Use that instead of sending messages ---
**Author:** ![Thiago\_Vilela](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/thiago_vilela/32/37352_2.png) [@Thiago\_Vilela](https://forum.inductiveautomation.com/u/Thiago_Vilela)\ **Post date:** [June 27, 2022, 1:55pm UTC](https://forum.inductiveautomation.com/t/canvas-how-to-add-or-remove-instances-using-click-event/61236/6 "2022-06-27T13:55:36Z")
Thanks. What would be the script to delete the instance? ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [June 27, 2022, 2:21pm UTC](https://forum.inductiveautomation.com/t/canvas-how-to-add-or-remove-instances-using-click-event/61236/7 "2022-06-27T14:21:46Z")
well I though using `del self.props.instances[event.index]` or `self.props.instances.pop(event.index)` would work, but it seems quite buggy - sometimes it does delete the instance, sometimes it doesn’t and create another one instead (because clicking the canvas creates a new mark). I’m not sure how to fix that, I’ll try a couple things but I don’t have much time. ---
**Author:** ![Thiago\_Vilela](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/thiago_vilela/32/37352_2.png) [@Thiago\_Vilela](https://forum.inductiveautomation.com/u/Thiago_Vilela)\ **Post date:** [June 27, 2022, 2:23pm UTC](https://forum.inductiveautomation.com/t/canvas-how-to-add-or-remove-instances-using-click-event/61236/8 "2022-06-27T14:23:51Z")
Thanks a lot, it was really helpful. I will try it. ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [June 27, 2022, 2:28pm UTC](https://forum.inductiveautomation.com/t/canvas-how-to-add-or-remove-instances-using-click-event/61236/9 "2022-06-27T14:28:31Z")
well it actually seems to work: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/a/fa2aef7ca3ece8a2bd31738231209a2f07d5aac6.png) I had to put the `add X mark` action to the double click event, as clicking on an instance also triggered the addition of a mark. Couldn’t find a `prevent default` for the `onInstanceClicked` event, which I guess kinds of messes things up. With double click for addition though, the removing part works fine.