How to remove div element from css2d object

Hi I actually add the div element in css2d object in runtime and i also add the button and add listener with it. once I click that button then my remove functionality call and that div remove but once I do then it didn’t remove and existing in scene
‘’‘function(event)
{
console.log(event.target.id);
let element=document.getElementById(event.target.id);
element.remove();
}’’’
here is my code of remove div element .the div which I created with css2d object and label renderer

Please use code blocks (three back ticks markdown syntax) for code, or press the code icon in the editor.

People are less likely to want to help people who paste unreadable code.

1 Like

You are right but my code inheritance is to much which I can’t upload to show you live .Can you please tell me is there any way which I can detect the css2d object with the help of click listener?

Btw, welcome. :slight_smile:

I see you tried to make a code block with quotes. You need back ticks. This symbol: `

Like this:

```javascript
if (true) foo();
```

The result:

if (true) foo();

Or, select text and hit the code icon, this one:

Markdown syntax cheat sheet is here:

https://commonmark.org/help/

No need for this code. event.target is exactly the same as document.getElementById(event.target.id).

So this code is the same as your code:

function(event) {
  console.log(event.target.id);
  event.target.remove();
}

However, we have no idea what you’re trying to do. You’re gonna have to post more details.

I actually tried to click on css2d object.it works but the thing is when I click and try to remove the element then it didn’t remove and see text label in the scene.I actually want to detect the label which i click

css2dObject.domElement.addEventListener('click', () => {
  console.log('clicked')
})

?

1 Like
let div = document.createElement( 'div' );
div.className = 'label';
div.textContent = '+';
div.type='button';
div.id='label6';
div.style.marginTop = '-1em';
div.addEventListener("mousedown",scope_AC.uiHandler.addConnectionBtns,false);
let label = new CSS2DObject( div );
label.position.copy(pos);
childModel.add( label );

scope_AC.modeler.labelRenderer.setSize( innerWidth, innerHeight );
scope_AC.modeler.labelRenderer.domElement.style.position = 'absolute';
scope_AC.modeler.labelRenderer.domElement.style.top = '15px';
scope_AC.modeler.labelRenderer.domElement.style.pointerEvents = 'none'
document.body.appendChild(scope_AC.modeler

Here is my code which i add text label in runtime

div.onclick = () => div.remove()

?

yes its not working

It isn’t clear what you are trying to do, and we’re not gonna be able to help unless you can provide a small working example reproduction or better code that shows exactly what the problem is.

Here is an example you can start from:

2 Likes

I meet the same question as you , the div created by css2dRenderer couldn’t removed by document.body removeChild(labelRenderer.domElement) , at last , i soluted this question but i dont know the reason. maybe it must be writed in front of clear the scene
···
export function clear() {

document.body.removeChild(labelRenderer.domElement)    //  fix

scene.traverse(function (child) {

  if (child.isMesh) {
    if (child.geometry) child.geometry.dispose();
    if (child.material) child.material.dispose();
    child.clear();
  }
});

// document.body.removeChild(labelRenderer.domElement)    //  useless

TWEEN && TWEEN.removeAll()

scene.clear();
renderer.dispose();
THREE.Cache.clear();

}
···

forgive my poor english