Dojo destroy MenuItems on DropDownButton

Question

I have the following markup:

<button dojoType="dijit.form.DropDownButton" dojoAttachPoint="labels" label="Labels">
    <div dojoType="dijit.Menu" dojoAttachPoint="labelsMenu"></div>
</button>

I am adding MenuItems programatically and it works fine for the first time. But when I want to refresh I get an error: Tried to register widget with id==16 but that id is already registered . I have tried the following code to clear but it's not working:

var labels = dijit.findWidgets(this.labels);
dojo.forEach(labels, function (l) {
    l.destroyRecursive();
});
dojo.empty(dojo.byId(this.labels));

I have also try the same thing for labelsMenu to empty it but no luck. Is there any other way to get rid of all children when reloading data or am missing something?

Answer 1

I have solved it and here's what I did: var menuChildren = dijit.byId(this.labelsMenu).getChildren(); if (menuChildren.length > 0){ dojo.forEach(menuChildren, function(mc){ mc.destroyRecursive(); }); } var menuChildren = dijit.byId(this.labelsMenu).getChildren(); if (menuChildren.length > 0){ dojo.forEach(menuChildren, function(mc){ mc.destroyRecursive(); }); }

Answer 2

In your code you call dojo.empty on the labels. dojo.empty() empties the element in the DOM but keeps the original element. So try calling dojo.empty on the dijit menu instead.

dojo.empty(dojo.byId("labelsMenu"));

For reference, in a fully baseless application , the dom-construct module is used.

require(["dojo/dom-construct"], function(domConstruct){
  // Empty node's children byId:
  domConstruct.empty("someId");
});