remove and create dojo accordian container with content panes

Question

I am new to Dojo, I am using Dojo 1.8, here his what I am trying to do- I have created a accordian container with some content panes in it. This is working, when I click on some button on the page I am calling a function (del), in here I want to remove the existing accordian container and its content panes. And then recreate accordian container with some different content panes. After calling the del function acordian container is not visible/created, and I don't see any errors

require(["dijit/layout/AccordionContainer", "dijit/layout/ContentPane", "dojo/domReady!"], function( AccordionContainer, ContentPane){
var myPane = new ContentPane({id: "mycnpane",title: "This is a content pane", content: "<div id='lastContentPaneId'>my content pane</div>", style:"height:100px", doLayout: true});
var aContainer = new AccordionContainer({id: 'myacc', style:"height: 100%"}, "markup");
aContainer.addChild(new ContentPane({
title: "This is a content pane",
content: "Hi", style:"height: 80px", doLayout: false
}));
aContainer.addChild(new ContentPane({
title:"This is as well",
content:"<li><a href='javascript:void(0)' >report</a></li>", doLayout: true
}));
aContainer.addChild(new ContentPane({
title:"This too",
content:"Hello im fine.. thnx"
}));
aContainer.addChild(myPane);
aContainer.startup();
});

function del(){
require(["dijit/registry", "dojo/dom","dijit/layout/AccordionContainer", "dijit/layout/ContentPane", "dojo/domReady!"], function( registry, dom, AccordionContainer, ContentPane){
var aContainer = registry.byId("myacc");

console.log(aContainer);

if(aContainer){

aContainer.destroyRendering(false);
aContainer.destroy(false);

}

aContainer = new AccordionContainer({style:"height: 100%","isLayoutContainer": true, "doLayout": false}, "markup");
console.log('testacc container::'+aContainer);

var mypane = new ContentPane({ id: '123', title: 'newly', doLayout: true });
mypane.set('content','<ul><li>1</li><li>2</li></ul>');

var mypane1 = new ContentPane({ id: '1234', title: 'newly', doLayout: true });
mypane1.set('content','<ul><li>1</li><li>2</li></ul>');

aContainer.addChild(mypane);
aContainer.addChild(mypane1);
aContainer.startup();

});
}

Answer 1

You can Simply use instead of

aContainer.destroyRendering(false);

aContainer.destroy(false);

use

aContainer.destroyRecursive();

it works with all the widget i use. if that didn't work try to place the accordion in the markup div using the placeAt, which will looks like this

var aContainer = new AccordionContainer({id: 'myacc', style:"height: 100%"}); aContainer.placeAt("markup")

and then destroyRecursive