Search code examples
javascripthtmltwincattwincat-hmi

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

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

UI snippet

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.

Solution

  • 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