how to remove and add rows in the layout

Webix JS
#1

hi,
i have a layout code like below

webix.ui({
view:"form", 
id:"log_form",
width:300,
elements:[
  {
    view: 'layout',id:"d1",
    cols: [
      { view:"text", label:"Email", name:"email"},
	  { view:"text", type:"password", label:"Password", name:"password"},
      {view:"icon", icon:"wxi-trash",click:function(){
           webix.message("Hello")
      }},
    ]
  },
{ margin:5, cols:[
{ view:"button", value:"Login" , css:"webix_primary"},
{ view:"button", value:"Cancel"}
]}
]
});

When the user clicks on the trash icon the row should be deleted,Similarly we should have an add button when the user clicks on the add row should be added.

How can i achieve this?

#2

Hello,

When the user clicks on the trash icon the row should be deleted

You need to get to the form elements via getParentView as

...
  click: function(){
        let toRemove = this.getParentView();
        this.getParentView().getParentView().removeView(toRemove)
    }
...

and remove the row with the help of removeView method

Sample: https://snippet.webix.com/d1miqh4t

add button when the user clicks on the add row should be added.

You can use AddView method

#3

@Nastja

First of all thank you for the reply Nastja

i tried the addView method like this ,But it is not working

webix.ui({

view:"form", 

id:"log_form",

width:300,

elements:[

  {

    view: 'layout',id:"d1",

    cols: [

      { view:"text", id:"lol",label:"Email", name:"email"},

      { view:"text", type:"password", label:"Password", name:"password"},

      {view:"icon", icon:"wxi-trash",  

       click: function(){

        let toRemove = this.getParentView();

        this.getParentView().getParentView().removeView(toRemove)

    }

      },

    ]

  },

{ margin:5, cols:[

{ view:"button", value:"Login" , css:"webix_primary"},

{ view:"button", value:"Cancel"},

  { view:"button", value:"AddView",click:function(){

    let toAdd = this.getParentView();

    this.getParentView().getParentView().addView(toAdd)

    
  }}

]}

]

});

My problem is when the user clicks on the addView button the entire row i.e

email,password,trash icon should be added.

if the user click on the two times addview button two rows should be added…

How can i do this ?

#4

You are welcome!

Please try the sample: https://snippet.webix.com/atezeak9