14

I found this function to remove a gui element but i think it is outdated. So far I haven't been able to find anyone else who knows how to remove any part of a gui, whether its an entire dat.GUI() or just an added element to a dat.GUI(). The first would probably be enough for what i need (just removing the dat.GUI() all together) but either one would be super helpful!

supposed to remove a dat.GUI()

gui = new dat.GUI();

...

removeGui(gui);

function removeGui(gui, parent) 
{
    if(!parent) 
    {
        parent = dat.GUI.autoPlaceContainer;
    }
    parent.removeChild(gui.domElement);
}

But gives back the error: cannot call method 'removeChild' of undefined, so i am guessing that autoPlaceContainer is wrong.

The original author of this function left these notes:

where the parameters gui represents the DAT.GUI you want to remove and parent is the parent container where if you didn't specify a domElement when instantiating DAT.GUI then you don't need to pass a parent.

WestLangley
  • 102,557
  • 10
  • 276
  • 276
user2287949
  • 233
  • 2
  • 4
  • 7
  • 3
    WOW! So I was going through all of the dat.GUI source code and found a destroy() function, so i tried it and it worked... from the example above all you have to do is gui.destroy(); – user2287949 May 02 '13 at 14:38
  • 1
    I have just tried to use `gui.destroy()` but it gives me an error: `destroy is not a function`. Can you post exactly what you did in an answer? – Bakuriu Apr 06 '14 at 07:44

6 Answers6

14
var gui = new dat.GUI();
item = gui.add(text, 'message');

To delete:

gui.remove(item);

If your item is inside a folder, you have to do:

folder.remove(item);
user2781849
  • 141
  • 1
  • 4
  • 8
    When using remove I keep getting this error "Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node" – Ash Blue Jun 12 '14 at 22:55
  • Same for me... did you find a solution Ash Blue? – José L. Nov 04 '15 at 10:38
  • 1
    Ok, I found a solution, not sure if it'll work for you Ash. Every time you use .min() or .max() you have to reassign the controller to a var: `var theItem=gui.add(obj, 'x'); theItem=theItem.min(0).max(10);`, for example. On the other hand, if you want to attach a listener, do not chain it and do not assign it to a var. So do `theItem=theItem.min(0).max(10); theItem.onChange(function(value){console.log(value);}); ` and not `theItem=theItem.min(0).max(10).onChange(function(value){console.log(value);});`. Hope that helps, I don't have time to research further about this... – José L. Nov 04 '15 at 14:15
12

If you want to remove the entire dat.GUI element along with all of its listeners, you can use gui.destroy()

If you want to reset the dat.GUI's values, you can use datGUI.__controllers.forEach(controller => controller.setValue(controller.initialValue));

Zach Saucier
  • 24,871
  • 12
  • 85
  • 147
  • Ok - so I just have to say - this does not remove all the listening controllers - if you want to have it done properly you need to remove the controllers from the __listening arrays (also inside the instance __folders property) and call updateDisplays with an empty array. – cybafelo Aug 31 '17 at 10:43
1

You can try hiding it using:

gui.hide()
Dharman
  • 30,962
  • 25
  • 85
  • 135
Rafael Silva
  • 11
  • 1
1

You can delete dat.GUI element like this:

gui.remove()

vf2e
  • 11
  • 1
0

If you want to remove all controllers of a gui element without destroying the gui element itself:

let gui = new dat.GUI();
//add some elements with gui.add method
...
//remove all controller of gui
while(gui.__controllers.length > 0) {
    gui.__controllers[0].remove();
}
Uglylab
  • 103
  • 1
  • 6
-1

Change the remove function in the dat.gui.js file: "slice" wants to be "splice".

The answer can be found here: https://github.com/ulyssesp/dat.gui/commit/86f43c0be5db08c9a6d7339aa8287620306fb0b5

ekatz
  • 1,050
  • 1
  • 11
  • 29