removeConnection(event)
{ 
 
    let parentElement = document.getElementById('RemoveElement');
    let childElement = document.getElementById(event.target.id);
    parentElement.removeChild(childElement);
  
}

i want to delete the child elelment from parent but when i do this then child element is not deleted and it exist in body and show in screen.

here is the hirerachy of html body

<div id="RemoveElement" style="overflow: hidden; width: 350px; height: 350px; position: absolute; top: 15px; pointer-events: none;">
   <div class="label" id="mesh_4" draggable="false" style="margin-top: -1em; pointer-events: auto; position: absolute; user-select: none; transform: translate(-50%, -50%) translate(204.578px, 255.514px); z-index: 1;">+</div>
   <div class="label" id="mesh_18" draggable="false" style="margin-top: -1em; pointer-events: auto; position: absolute; user-select: none; transform: translate(-50%, -50%) translate(148.623px, 64.7255px); z-index: 2;">+</div>
</div>




  console.log(childModel.name);
    let div = document.createElement('div');
    div.className = 'label';
    div.textContent = '+';
    div.type='button';
    div.id=childModel.name;
    div.style.marginTop = '-1em';
  
    div.addEventListener("pointerdown",scope_AC.uiHandler.removeConnection,false);
    let label = new CSS2DObject( div );
    childModel.add( label );
    label.position.copy(pos);
    

    scope_AC.modeler.labelRenderer.setSize( 350, 350 );
    scope_AC.modeler.labelRenderer.domElement.style.position = 'absolute';
    scope_AC.modeler.labelRenderer.domElement.style.top = '15px';
    scope_AC.modeler.labelRenderer.domElement.id = 'RemoveElement';  document.body.appendChild(scope_AC.modeler.labelRenderer.domElement);