How to remove Group of CSS2DObject from the scene - css

Question

I have a dynamic msg_arr array of strings that I want to visualize, and I want to remove the old errs Group of CSS2DObject from the scene before creating the new errors Group.
The problem in my case is that the new CSS2DObjects are added perfectly to the Group, but the reset: this.scene.remove(this.errs); is not working well!
Should I remove and create a new CSS2DRenderer??
Can you please tell me how can I be sure of resetting the whole old Group before creating the new one? thanks in advance.
var camera, scene, renderer, errs;
/**
ErrVisu class
*/
class ErrVisu{
constructor(scene){
this.scene = scene;
}
visuError=(x, y, errs)=>{
const x_mm = y * 0.8 - 8.8;
const y_mm = 2.5;
const z_mm = x * 0.8 - 2.4;
const circle = document.createElement('div');
circle.id = "circle";
circle.innerHTML = "!";
const objectCSS = new THREE.CSS2DObject(circle);
objectCSS.position.set(x_mm, y_mm, z_mm);
objectCSS.name = 'exc_' + x + y;
errs.add(objectCSS);
}
errsIface = (msg_arr) => {
this.scene.remove(this.errs);
this.errs = new THREE.Group();
this.errs.name = "errors";
for (let k in msg_arr) {
let p_xx_yy = msg_arr[k].split("_");
let x = Number(p_xx_yy[1]);
let y = Number(p_xx_yy[2]);
this.visuError(x, y, this.errs);
}
this.scene.add(this.errs);
}
}
/**
Create the scene, camera, renderer
*/
function init() {
scene = new THREE.Scene();
scene.background = new THREE.Color(0x21252d);
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.x = 1;
camera.position.y = 4;
camera.position.z = 5;
scene.add(camera);
labelRenderer = new THREE.CSS2DRenderer();
labelRenderer.setSize( window.innerWidth, window.innerHeight );
labelRenderer.domElement.style.position = 'absolute';
labelRenderer.domElement.style.top = '0px';
document.body.appendChild( labelRenderer.domElement );
controls = new THREE.OrbitControls(camera, labelRenderer.domElement);
errs = new ErrVisu(scene);
let msg_arr_ = [ "p_06_08" ];
errs.errsIface(msg_arr_);
window.addEventListener('resize', onWindowResize);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
labelRenderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
renderer.render(scene, camera);
labelRenderer.render( scene, camera );
}
init();
animate();
#circle {
color: #ffffff;
background: #ff5500;
width: 30px;
height: 30px;
border-radius: 50%;
text-align: center;
font-size: 25px;
font-weight: bold;
display: inline-block;
animation: blinkingBackground 0.5s infinite;
}
#keyframes blinkingBackground {
0% {
opacity: 1;
}
25% {
opacity: 0.5;
}
50% {
opacity: 0.1;
}
75% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
<script src="https://cdn.jsdelivr.net/npm/three#0.122.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three#0.122.0/examples/js/controls/OrbitControls.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three#0.122.0/examples/js/renderers/CSS2DRenderer.js"></script>

Answer 1

The solution ( source ) was to create an array of CSS2DObjects and to remove the items of that array from the scene rather than combining the Objects in a Group!:
errs.forEach((item) => {
this.scene.remove(item);
});
errs = [];
visuError=(x, y, errs, scene)=>{
const x_mm = y * 0.8 - 8.8;
const y_mm = 2.5;
const z_mm = x * 0.8 - 2.4;
const circle = document.createElement('div');
circle.id = "circle";
circle.innerHTML = "!";
const objectCSS = new CSS2DObject(circle);
objectCSS.position.set(x_mm, y_mm, z_mm);
objectCSS.name = 'exc_' + x + y;
scene.add(objectCSS);
errs.push(objectCSS);
}