It seems that the root of my problem lies in my use of ng-repeat, so I won't go into too much detail on the rest but feel free to ask for more information.
Indeed, I am employing ng-repeat to iterate over a certain number of div elements stored in an array.
Each time I create a new div and add it to the array...
var newDiv = document.createElement('div');
$scope.arrayDiv.push(newDiv);
...I also insert a button (which, in reality, is an image) and attach it to the div.
var newButton = document.createElement('img');
newButton.style="position: absolute; top: 6px; left: 16px; z-index: 9999;";
newButton.onclick=function() {
//delete the parentNode
}
newDiv.appendChild(newButton);
This button essentially serves as a close button to remove the containing div. Everything seems to be working fine, but here's the catch:
The close button only appears on the first div, not on the others. Nonetheless, the button is able to close the divs one by one. This suggests that the buttons may be overlapping.
I hope that clears things up. Here is the ng-repeat block I mentioned:
<div id='main_chart_div' ng-repeat="x in arrayDiv" value={{x}}></div>