How to remove dojo widgets by registered by id, but not referenced in any DOM node

Question

Context: I am working on an application which has now been converted to a single page application. There are many widgets in the application and a lot of them have been assigned id, so that they are easy to get as and when required. When we navigate inside the application, the domNode is being cleared by domConstruct.empty(this.someNode) and new DOM is being placed in it.

The problem happening here is, although the DOM is cleared, but the widgets are still registered by the same ids and when we navigate to that page again, it just shows up nothing. (There is not even an exception. Tried in Chrome, Firefox, IE)

It was working fine previously, because during navigation, every time a new page opened up with a new link, hence there was no problem related to ids.

So, how can I remove the widgets that are registered by ids but are not referenced by any domNode?

P.S: I know that the problem is related to ids of the widgets because when I registered only a single widget with an id, it got registered for the first time but when I navigated again there while debugging, at that step, the widget did not register and there was no exception either.

Edit1: Is using this.own() a solution for this?

Answer 1

At face value, you are looking for dijit/registry.findWidgets:

require([ 'dojo/_base/array', 'dojo/dom-construct', 'dijit/registry' ], function (arrayUtil, domConstruct, registry) {
    arrayUtil.forEach(registry.findWidgets(this.someNode), function (widget) {
        widget.destroyRecursive();
    });
    domConstruct.empty(this.someNode);
});

If you're generally dealing with an area of free-form content that often needs to be cleared or refreshed, you might want to look at dijit/layout/ContentPane.