I'm working with ThreeJs in order to provide a ruler for the 3d model.

I have created a div in this way and than I have put it inside CSS2DObject as in the below code

        const measurementDiv = document.createElement('div');
        const labelDiv = document.createElement('div');
        const close_button = document.createElement('button');
        close_button.type = "button";
        close_button.innerHTML ='x';
        close_button.id = lineId;
        close_button.className='measurementButton';
        measurementDiv.className = 'measurement';
        labelDiv.className = 'measurementLabel';
        labelDiv.innerText = "0.0 mm";
        measurementDiv.appendChild(labelDiv);
        measurementDiv.appendChild(close_button);
        close_button.addEventListener('click', function(){
            console.log( event ) ;
            // scene.remove(measurementLabels[close_button.id]);
        });
        const measurementLabel = new CSS2DObject(measurementDiv);

what I would like to do is, when I click on the button I delete the CSS2DObject.

the problem is that if I click on the button the click event is not fired. it seems that the main render view is getting the event and it does not transfer it to the underline dom element

at this link you can try a simple example https://codepen.io/mboscolo/pen/XWapaEK

thanks