如何删除 dat.GUI 元素？答案

【问题标题】：How to delete dat.GUI element?如何删除 dat.GUI 元素？
【发布时间】：2013-04-25 14:54:26
【问题描述】：

我发现这个函数可以删除一个 gui 元素，但我认为它已经过时了。到目前为止，我还没有找到其他知道如何删除 gui 任何部分的人，无论是整个 dat.GUI() 还是只是添加到 dat.GUI() 的元素。第一个可能足以满足我的需要（只需将 dat.GUI() 一起删除），但任何一个都会非常有帮助！

应该删除一个 dat.GUI()

gui = new dat.GUI();

...

removeGui(gui);

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

但返回错误：无法调用未定义的方法“removeChild”，所以我猜测 autoPlaceContainer 是错误的。

这个函数的原作者留下了这些注释：

其中参数 gui 表示您要删除的 DAT.GUI，parent 是父容器，如果在实例化 DAT.GUI 时未指定 domElement，则无需传递父容器。

【问题讨论】：

哇！所以我浏览了所有的 dat.GUI 源代码并找到了一个 destroy() 函数，所以我尝试了它并且它工作了......从上面的例子中你所要做的就是 gui.destroy();
我刚刚尝试使用gui.destroy()，但它给了我一个错误：destroy is not a function。你能准确地发布你在答案中所做的事情吗？

标签： user-interface three.js dat.gui

【解决方案1】：

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

删除：

gui.remove(item);

如果您的项目在文件夹中，您必须这样做：

folder.remove(item);

【讨论】：

使用 remove 时，我不断收到此错误“无法在 'Node' 上执行 'removeChild'：要删除的节点不是该节点的子节点”
我也一样...您找到解决方案 Ash Blue 了吗？
好的，我找到了一个解决方案，不确定它是否适合你 Ash。每次使用 .min() 或 .max() 时，都必须将控制器重新分配给 var：var theItem=gui.add(obj, 'x'); theItem=theItem.min(0).max(10);，例如。另一方面，如果要附加侦听器，请不要将其链接起来，也不要将其分配给 var。 theItem=theItem.min(0).max(10); theItem.onChange(function(value){console.log(value);}); 而不是 theItem=theItem.min(0).max(10).onChange(function(value){console.log(value);}); 也是如此。希望对您有所帮助，我没有时间对此进行进一步研究...

【解决方案2】：

如果要删除整个 dat.GUI 元素及其所有侦听器，可以使用 gui.destroy()

如果要重置dat.GUI的值，可以使用datGUI.__controllers.forEach(controller => controller.setValue(controller.initialValue));

【讨论】：

好的 - 所以我只想说 - 这不会删除所有监听控制器 - 如果你想正确完成它，你需要从 __listening 数组中删除控制器（也在实例 __folders属性）并使用空数组调用 updateDisplays。

【解决方案3】：

您可以像这样删除 dat.GUI 元素：

gui.remove()

【讨论】：

【解决方案4】：

您可以尝试使用以下方法隐藏它：

gui.hide()

【讨论】：

【解决方案5】：

更改 dat.gui.js 文件中的删除功能：“slice”想成为“splice”。

可以在这里找到答案：https://github.com/ulyssesp/dat.gui/commit/86f43c0be5db08c9a6d7339aa8287620306fb0b5

【讨论】：