Removing element from gui interface

[davejack1]

var guiControls = new function () {
        this.data1 = true;
        this.data2 = true;
};

var datGUI = new dat.GUI

datGUI.add(guiControls, 'data1')
datGUI.add(guiControls, 'data2')

Now I want to remove data2 from the datGUI interface. How can I do that?

[Sigill]

You can use the remove() method, but you need to store the controller returned by add(): https://github.com/dataarts/dat.gui/blob/d5b6178e33db91b168a1264dcc5252be2d6510ef/src/dat/gui/GUI.js#L502

var guiControls = new function () {
        this.data1 = true;
        this.data2 = true;
};
var datGUI = new dat.GUI

var controller1 = datGUI.add(guiControls, 'data1');
var controller2 = datGUI.add(guiControls, 'data2');
...
datGUI.remove(controller1);
datGUI.remove(controller2);

It also allows to remove controllers from folders (but not to remove folders).

[krjk333]

Similarly, I need to add data3 with the gui after clicking data2. How to do that