# How to remove div element from css2d object

**URL:** <https://discourse.threejs.org/t/how-to-remove-div-element-from-css2d-object/37111>\
**Category:** Questions\
**Tags:** javascript, css2dobject, css2drenderer\
**Created:** [April 15, 2022, 7:19pm UTC](https://discourse.threejs.org/t/how-to-remove-div-element-from-css2d-object/37111 "2022-04-15T19:19:07Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![Hi\_Lamb](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hi_lamb/32/25047_2.png) [@Hi\_Lamb](https://discourse.threejs.org/u/Hi_Lamb)\
**Post date:** [April 15, 2022, 7:19pm UTC](https://discourse.threejs.org/t/how-to-remove-div-element-from-css2d-object/37111/1 "2022-04-15T19:19:07Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![trusktr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/trusktr/32/13726_2.png) [@trusktr](https://discourse.threejs.org/u/trusktr)\
**Post date:** [April 15, 2022, 9:22pm UTC](https://discourse.threejs.org/t/how-to-remove-div-element-from-css2d-object/37111/2 "2022-04-15T21:22:37Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Hi\_Lamb](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hi_lamb/32/25047_2.png) [@Hi\_Lamb](https://discourse.threejs.org/u/Hi_Lamb)\
**Post date:** [April 15, 2022, 9:47pm UTC](https://discourse.threejs.org/t/how-to-remove-div-element-from-css2d-object/37111/3 "2022-04-15T21:47:05Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![trusktr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/trusktr/32/13726_2.png) [@trusktr](https://discourse.threejs.org/u/trusktr)\
**Post date:** [April 15, 2022, 11:18pm UTC](https://discourse.threejs.org/t/how-to-remove-div-element-from-css2d-object/37111/4 "2022-04-15T23:18:13Z")

</div>

Btw, welcome. 🙂

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

Like this:

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

````

The result:

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

```

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

![](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/a/3a978a860132c4e61938a3b86a7993c1a54f0888.png)

Markdown syntax cheat sheet is here:

[https://commonmark.org/help/](https://commonmark.org/help/)

---

<div class="post-metadata">

**Author:** ![trusktr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/trusktr/32/13726_2.png) [@trusktr](https://discourse.threejs.org/u/trusktr)\
**Post date:** [April 15, 2022, 11:31pm UTC](https://discourse.threejs.org/t/how-to-remove-div-element-from-css2d-object/37111/5 "2022-04-15T23:31:36Z")

</div>

> [@Hi\_Lamb](#):
>
> element=document.getElementById(event.target.id);

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:

```javascript
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.

---

<div class="post-metadata">

**Author:** ![Hi\_Lamb](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hi_lamb/32/25047_2.png) [@Hi\_Lamb](https://discourse.threejs.org/u/Hi_Lamb)\
**Post date:** [April 15, 2022, 11:33pm UTC](https://discourse.threejs.org/t/how-to-remove-div-element-from-css2d-object/37111/6 "2022-04-15T23:33:06Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![trusktr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/trusktr/32/13726_2.png) [@trusktr](https://discourse.threejs.org/u/trusktr)\
**Post date:** [April 15, 2022, 11:34pm UTC](https://discourse.threejs.org/t/how-to-remove-div-element-from-css2d-object/37111/7 "2022-04-15T23:34:49Z")

</div>

> [@Hi\_Lamb](#):
>
> detect the css2d object with the help of click listener?

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

```

?

---

<div class="post-metadata">

**Author:** ![Hi\_Lamb](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hi_lamb/32/25047_2.png) [@Hi\_Lamb](https://discourse.threejs.org/u/Hi_Lamb)\
**Post date:** [April 15, 2022, 11:37pm UTC](https://discourse.threejs.org/t/how-to-remove-div-element-from-css2d-object/37111/8 "2022-04-15T23:37:58Z")

</div>

```javascript
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

```

---

<div class="post-metadata">

**Author:** ![Hi\_Lamb](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hi_lamb/32/25047_2.png) [@Hi\_Lamb](https://discourse.threejs.org/u/Hi_Lamb)\
**Post date:** [April 15, 2022, 11:39pm UTC](https://discourse.threejs.org/t/how-to-remove-div-element-from-css2d-object/37111/9 "2022-04-15T23:39:22Z")

</div>

Here is my code which i add text label in runtime

---

<div class="post-metadata">

**Author:** ![trusktr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/trusktr/32/13726_2.png) [@trusktr](https://discourse.threejs.org/u/trusktr)\
**Post date:** [April 15, 2022, 11:53pm UTC](https://discourse.threejs.org/t/how-to-remove-div-element-from-css2d-object/37111/10 "2022-04-15T23:53:36Z")

</div>

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

```

?

---

<div class="post-metadata">

**Author:** ![Hi\_Lamb](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hi_lamb/32/25047_2.png) [@Hi\_Lamb](https://discourse.threejs.org/u/Hi_Lamb)\
**Post date:** [April 16, 2022, 6:55am UTC](https://discourse.threejs.org/t/how-to-remove-div-element-from-css2d-object/37111/11 "2022-04-16T06:55:03Z")

</div>

yes its not working

---

<div class="post-metadata">

**Author:** ![trusktr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/trusktr/32/13726_2.png) [@trusktr](https://discourse.threejs.org/u/trusktr)\
**Post date:** [April 18, 2022, 5:05am UTC](https://discourse.threejs.org/t/how-to-remove-div-element-from-css2d-object/37111/12 "2022-04-18T05:05:04Z")

</div>

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:

https://codepen.io/trusktr/embed/preview/ZEvVpra?default-tabs=js%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=ZEvVpra

---

<div class="post-metadata">

**Author:** ![MrYang614](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mryang614/32/34021_2.png) [@MrYang614](https://discourse.threejs.org/u/MrYang614)\
**Post date:** [March 2, 2023, 2:19am UTC](https://discourse.threejs.org/t/how-to-remove-div-element-from-css2d-object/37111/13 "2023-03-02T02:19:18Z")

</div>

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();

```

}  
···

---

<div class="post-metadata">

**Author:** ![MrYang614](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mryang614/32/34021_2.png) [@MrYang614](https://discourse.threejs.org/u/MrYang614)\
**Post date:** [March 2, 2023, 2:21am UTC](https://discourse.threejs.org/t/how-to-remove-div-element-from-css2d-object/37111/14 "2023-03-02T02:21:01Z")

</div>

forgive my poor english