Problem with removeChild();

Hi all, my problem is that, I have two function on javascript:
Function1 for create control on the page and Function2 for remove that control.

Function1 is work fine, it can create control on page. Function2 also work fine it can remove that control from the page.

But when i use function1 to create control again it got an error it say “The control with that ID already exist on the page”. It seem to be the control is not remove from the page, it just hide. It’s maybe wrong with my function2.

===Here my function1 to create control on the page===

[code]
function createDraggableDiv()
{
//get the cameraID from uxCameraName…
try
{
var IndexValue = $get(‘<%=uxCameraName.ClientID %>’).selectedIndex;
var SelectedVal = $get(‘<%=uxCameraName.ClientID %>’).options[IndexValue].value;
}
catch(err)
{
alert(‘No camera has been selected!’);
return;
}

var panel= document.createElement(“div”);
panel.className = “PanelCamera”;
panel.setAttribute(“id”,”uxPanelDrag”+SelectedVal);

var panelHandle = document.createElement(“div”);
panelHandle.style.height=”21px”;
panelHandle.style.width=”auto”;
panelHandle.className=”sci-picker-header-camera”;
panel.appendChild(panelHandle);

var btnquit = document.createElement(“input”);
btnquit.type=”image”;
btnquit.style.height=”17px”;
btnquit.style.width=”16px”;
btnquit.title = “Close/Remove camera”;
btnquit.src=”/AjaxDragDrop/image/close.png”;
panelHandle.appendChild(btnquit);
btnquit.onclick = function(){removeDraggableDive(SelectedVal); return false;};

var btnpin = document.createElement(“input”);
btnpin.type=”image”;
btnpin.className=”ImagePin”;
btnpin.title = “Locking/Release camera”;
btnpin.src=”/AjaxDragDrop/image/pin_out.png”;
panelHandle.appendChild(btnpin);
btnpin.onclick = function(){PinINPinOUT(this); return false;};

var image= document.createElement(“img”);
image.src=”/AjaxDragDrop/image/camera_enabled_65.png”;
image.className = “ImageCamera”;
panel.appendChild(image);

try
{
var target = $get(‘containerDiv’).appendChild(panel);
addFloatingBehavior(panel, panelHandle);
}
catch(err)
{
panel.parentNode.removeChild(panel);
//alert(‘This camera already exist on site map!’);
alert(err.description);
return;
}
}

function addFloatingBehavior(ctrl, ctrlHandle)
{
var obj = $create(Custom.UI.FloatingBehavior, {‘handle’: ctrlHandle}, null, null, ctrl);
}
[/code]

===Here my function2 to remove control from the page===

[code]
function removeDraggableDive(ItemID)
{
try
{
if (document.getElementById(“uxPanelDrag”+ItemID))
{
var ctlParent = document.getElementById(“uxPanelDrag”+ItemID);
ctlParent.parentNode.removeChild(ctlParent);
}
}
catch(err)
{
alert(err.description);
}
}
[/code]

any idea?, please help.
thank

Also in #JavaScript _↴