TwinCAT 3 HMI - Using a button in a usercontrol to delete instance of usercontrol

Question

I have an instances of a usercontrol consisting of a dropdown list, a spinbox, and button in a container:

Usercontrols are dynmically generated with TcHmi.ControlFactory.createEx.

When I press the usercontrol's delete button, it should delete the instance of that usercontrol.

My current approach is to somehow get the button's parent which should be the instance of the usercontrol, then remove it from the container. However, I have tried the following code in the button's .onMouseClick event:

console.log(this.parentElement); //undefined
console.log(this); //some kind of json object for the whole .content file that the container is in

I can't get the clicked button's HTML element or it's parent.

Answer 1

I guess on the creation of the button you give the createEx-function a reference to the control which the button belongs to:

TcHmi.ControlFactory.createEx('tchmi-button', this.__id + '_closeButton', {} , this);

In the button's .onMouseClick you can then enter something like:

let parent = this.getParent();
parent.getElement().remove() // remove from DOM
parent.destroy(); // delete javascript objects inclusive all childrens