innerHTML create and remove elements

[mathmed]

Hi! I made simple script, that creates and removes <div> element. I'm experiencing a problem, I can't remove the <div>. Although it may seem trivial, I don't know how to solve it. Moreover, chrome and firefox don't give me the error description.

function removeDOMforChart(id) {
var tmpElementVar = document.getElementById(id);
tmpElementVar.innerHTML = "";
//tmpElementVar.parentNode.removeChild(tmpElementVar); 
}

function addDOMforChart() {
var parentID = document.getElementById("furtherCharts");
var childFreeID = returnFirstFreeNo();
var fullID = 'chart'+childFreeID;
var divID = 'd'+fullID;
	parentID.innerHTML +='<div id="'+divID+'" style="width:800px;">';
	parentID.innerHTML +='<canvas id="'+fullID+'" width=780 style="float:left;"></canvas>';
	parentID.innerHTML +='<img src="goUp.png" style="float:right;" onclick="removeDOMforChart(\''+divID+'\');">';
	parentID.innerHTML +='<img src="closeChart.png" style="float:right;">';
	parentID.innerHTML +='</div>'
}

The HTML looks like this :

<div id="furtherCharts"></div>

I attach next div's of name dchart0,dchart1, to a div of id = "furtherCharts" etc. Within every new div there is an img with onclick function passing argument of ID (dchart0,...) to a function removeDOMforChart(id) to remove itself.

I try to remove the content of element (chart0,...) with tmpElementVar.innerHTML = "";, no joy but no error also, with
tmpElementVar.parentNode.removeChild(tmpElementVar);
I get nothing for the first click, after this, every next click triggers an error
"Uncaught TypeError: Cannot set property 'innerHTML' of null";

Looks like the div element gets removed, but on the screen nothing changes ? How is this even possible ? Please, help me with this.

[mathmed]

<script>
var childFreeID=0;
function removeDOMforChart(id) {

var fullID = 'chart'+id;
var divID = 'd'+fullID;
var tmpElementVar = document.getElementById(divID);
tmpElementVar.innerHTML = "aaaa";
tmpElementVar.parentNode.removeChild(tmpElementVar);
}
//////////////////////////////////////////////////////
function addDOMforChart() {

var parentID = document.getElementById("furtherCharts");
var fullID = 'chart'+childFreeID;
var divID = 'd'+fullID;
	parentID.innerHTML +='<div id="'+divID+'" style="">';
	parentID.innerHTML +='</div>'
	
var parentID = document.getElementById(divID);
	parentID.innerHTML +='<canvas id="'+fullID+'" width=780 height=200"></canvas>';
	parentID.innerHTML +='element of id: '+fullID+'<br>';
	parentID.innerHTML +='<a href="javascript:removeDOMforChart('+childFreeID+')" >remove</a>';
	
childFreeID ++;
}
</script>
<a href="javascript:addDOMforChart()" >add</a>
<div id="furtherCharts">
</div>

This works well, I add elements sequentially, like this :

var parentID = document.getElementById("furtherCharts");
var fullID = 'chart'+childFreeID;
var divID = 'd'+fullID;
	parentID.innerHTML +='<div id="'+divID+'" style="">';
	parentID.innerHTML +='</div>'

and then I find by id created element, 'innerHTML' to it.

var parentID = document.getElementById(divID);
	parentID.innerHTML +='<canvas id="'+fullID+'" width=780 height=200"></canvas>';
	parentID.innerHTML +='element of id: '+fullID+'<br>';
	parentID.innerHTML +='<a href="javascript:removeDOMforChart('+childFreeID+')" >remove</a>';

Still don't know why it didn't work well when I added all of the elements (with id's) at once.