CODEWITHSUNDEEP
user-interfacethree.jsdat.gui
user2287949
user2287949

Reputation: 243

How to delete dat.GUI element?

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.

Upvotes: 15

Views: 11427

Answers (6)

user5924708
user5924708

Reputation:

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();
}

Upvotes: 0

Rafael Silva
Rafael Silva

Reputation: 11

You can try hiding it using:

gui.hide()

Upvotes: 1

vf2e
vf2e

Reputation: 31

You can delete dat.GUI element like this:

gui.remove()

Upvotes: 1

Zach Saucier
Zach Saucier

Reputation: 25954

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));

Upvotes: 13

ekatz
ekatz

Reputation: 1070

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

Upvotes: -1

user2781849
user2781849

Reputation: 141

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);

Upvotes: 14

Related Questions