Dojo dijit add Div buttons dynamically - html

Question

I am having an issue with trying to dynamically create layers that can be be built and removed with a div as a button being added upon the layer's creation. Here's how the code goes:
I am having an issue with trying to dynamically create layers that can be be built and removed with a div as a button being added upon the layer's creation. Here's how the code goes:
//build point graphics layer
graphicsLayerInfo = this._addNewExcelLayerToList(plotArray.length);
graphicsLyr = new GraphicsLayer( { id:graphicsLayerInfo.graphicsLayerID} );
this.map.add(graphicsLyr);
on(dojo.byId(graphicsLayerInfo.removeButtonID), "click" , lang.hitch(this, this._removeExcelLayer, {layerID: graphicsLayerInfo.graphicsLayerID, buttonLayerID: graphicsLayerInfo.currentLayerInfo}) );
...
and the function used to build the DIV/button
_addNewExcelLayerToList: function (pointCount) {
if (this.debugMOde) {
console.info( this.name + ' - ADD NEW EXCEL LAYER called.' );
}
this.layerCount++;
currentLayerID = 'graphicsLayer' + this.layerCount;
graphicsLayerID = this.name + '_gLyr' + this.layerCount;
removeButtonID = "removeGraphicsLayer" + this.layerCount;
this.layerList.push(currentLayerID);
var layerInfo = "Number of Features: 1 Line";
if (pointCount) {
layerInfo = "Number of Features: " + pointCount;
}
content = "<div id ='" + currentLayerID + "'" +
"style='width: 95%;" +
"height: 16px;" +
"line-height: 16px" +
"verticle-align: middle;" +
"padding: 5px;" +
"background-color: #000000;'" +
">" +
"<div style='float:left;'>" +
"<div style="float: left;" +
"width: 20px;" +
"line-height: 20px;" +
">" +
"<img src='./js/Upload/images/excel.png'" +
"style='position: absolute;" +
"top: 0;" +
"bottom: 0;" +
"margin-top: -10px;" +
"width: 20px;" +
"vertical-align: middle;'" +
"></img>" +
"</div>
"<div style='float:left;" +
"font-size: 0.9em;" +
"color: #ffffff;'" +
">" +
"Layer" + this.layerCount + ": " + layerInfo +
"</div>" +
"</div>" +
"<div id='" + removeButtonID + "'" +
"data-dojo-attach-point='" + removeButtonID + "'" +
"name='" + removeButtonID + "'" +
"id='" + removeBUttonID + "'" +
"style='float: right;" +
"width: 13px;" +
"height: 13px;" +
"cursor: pointer;" +
"border-radius: 50%;" +
"border: 2px; solid #ffffff;" +
"background-color: #ff0000;" +
"color: #ffffff;" +
"font-weight: 300;" +
"font-size: 17px;" +
"font-family: Arial, sans-serif;" +
"text-align: center;'" +
">" +
"X" +
"</div>" +
"</div>";
layerListDiv.innerHTML += content;
graphicsLayerInfo = {
removeButtonID: removeButtonID,
graphicsLayerID: graphicsLayerID,
currentLayerID: currentLayerID
}
return graphicsLayerInfo
}
and the function to remove the DIV
_removeExcelLayer: function(layerInfo) {
if (this.debugMode) {
console.info( this.name + " - REMOVE EXCEL LAYER called.");
}
this.map.removeLayer( this.map.getLayer(layerInfo.layerID) );
dojo.destroy(layerInfo.buttonLayerID);
}
It removes the layer if I create only one. If I create more than one, only the last layer created gets moved. All the other 'removeButton's don't work.
Any ideas on how to get this to remove the layers individually, per button?

Answer 1

Well, with the help of a coworker, I got it to work, but not with exactly a separate Event Handler. I used a domConstruct to create it's own area of influence:
domConstruct.create("div", { innerHTML: content }, layerListDiv);
instead of the straight:
layerListDiv.innerHTML += content;
Thank you for your attempts ManjunathaMuniyappa.