Remove child content pane from declarative AccordionContainer

I have created dojo layout with declarative ContentPane and AccordionContainer.

I am not able to remove child from AccordionContainer using javascript.

Below is my sample code :

 <div id="main" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'">           
            <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" id="leftPane">
                <div data-dojo-type="dijit/layout/ContentPane">
                    <div data-dojo-type="dijit/layout/AccordionContainer" id="accContainer">
                        <div  data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Boundary'" >                            
                            ...
                        </div>                        
                        <div data-dojo-type="dijit/layout/ContentPane" id="bufferPane" data-dojo-props="title:'Works Boundary: Buffer'">
                            ...
                        </div> 
                    </div>
                </div>
                <hr>                
                <div data-dojo-type="dijit/layout/ContentPane" >
                    Area In :
                    <div id="area"></div>
                </div>
            </div>
    </div>

dom.byId("accContainer") throws exception while getting children using .getChildren() function.

registry and dijit by id returns null values.

Is there any way to add\remove child node in AccordionContainer programatically? i.e. bufferPane in my case.

Any help would be appreciated.

Regards, Prashant

Solution

You have to use dojo Widget Registry builtin method ,

addChild ,destroyRecursive ...

So, if you want to add a contentpane ionside the accordion , use the addChild accoredionPane method

Also , for deleting a widget inside a parent widget , it's better to use the dijit/registry registry.findWidgets(Parentwdiget) to get all encolsing widget and the n delete them all or applying a filter to search by id ....

See below Snippet:

require(["dojo/on", "dojo/dom", "dojo/ready", "dijit/registry","dojo/dom-construct", "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
  "dijit/layout/AccordionContainer", "dijit/form/Button"
], function(On, dom, ready, registry,domConstruct, BorderContainer, ContentPane, AccordionContainer, Button) {
  ready(function() {
    var accordionContainer = registry.byId("accContainer");
    
    registry.byId("add").on("click",function(e){
      accordionContainer.addChild(addContentPane('Pane Sample'));
    })
    
    registry.byId("remove").on("click",function(e){
      //console.log(accordionContainer);
      var widgets = registry.findWidgets(dom.byId("accContainer"));
      if(widgets.length > 0) {
        widgets[widgets.length - 1].destroyRecursive();
      }
      //widgets[0].destroyRecursive();*/
    })
    
    registry.byId("removeBuffer").on("click",function(e){
      widgetid = 'bufferPane';
    
      var widgets = registry.findWidgets(dom.byId("accContainer"));
      console.log(widgets);
      var widget = widgets.filter(widget => widget.id === widgetid+'_wrapper');
      if(widget[0])widget[0].destroyRecursive();
      
    });
    
    
    addContentPane = function(title) {
      contentPanel = new ContentPane({title:title,content:'Some Text here'});
      return contentPanel;
    }
    
    
    
  })

});

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

#accContainer {
  height: 100% !important;
}

<link href="//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css" rel="stylesheet" />
<script>
  dojoConfig = {
    parseOnLoad: true,
    async: true
  };
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dojo/dojo.js"></script>

<body class="claro">
  <div id="main" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width: 100%; height: 100%">
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" id="leftPane">
      <div data-dojo-type="dijit/layout/ContentPane">
        <div data-dojo-type="dijit/layout/AccordionContainer" id="accContainer" style="height: 100%">
          <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Boundary'">
            ...
          </div>
          <div data-dojo-type="dijit/layout/ContentPane" id="bufferPane" data-dojo-props="title:'Works Boundary: Buffer'">
            ...
          </div>
        </div>
      </div>
      <hr>
      <div data-dojo-type="dijit/layout/ContentPane">
        Area In :
        <div id="area"></div>
        
        <div data-dojo-type="dijit/form/Button" id="add">Add</div>
        <div data-dojo-type="dijit/form/Button" id="remove">Remove Last</div>
        <div data-dojo-type="dijit/form/Button" id="removeBuffer">Remove Buffer Pane</div>
      </div>
    </div>
  </div>
</body>