## Syntax
### The `remove()` method
This method is invoked through the parent object.
```
parentObject.remove(childObject);
```

## Parameters
This method takes the Object3D to be removed as a parameter.
Here,
* `parentObject`: This is the parent whose child we want to remove.
* `childObject`: This is the child that we want to remove.

> **Note:** The `childObject` must already be a child of `parentObject` before it is removed. If it is not already a child, no effect takes place.

### The`removeFromParent()` method
This method is invoked through the child itself.
```
childObject.removeFromParent();
```
## Parameters
* This method does not take any parameters.


* `childObject`: This is the child who is to be removed from its parent.

<html>
	<head>
		<title>Three - Remove</title>
		<style>
			body { margin: 0; }
		</style>
	</head>
	<body>
		<script src="https://threejs.org/build/three.js"></script>
		<script>

            // scene
			const scene = new THREE.Scene();

            // camera
			const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.position.z = 3;

            // renderer
			const renderer = new THREE.WebGLRenderer();
			renderer.setSize(window.innerWidth, window.innerHeight);
			document.body.appendChild(renderer.domElement);

            // light
            const light = new THREE.AmbientLight (0xffffff, 0.5);
            scene.add(light);

            // shape_one
			const geometry_one = new THREE.BoxGeometry(1, 1, 1);
			const material_one = new THREE.MeshBasicMaterial({color: 0xffff00});
			const shape_one = new THREE.Mesh(geometry_one, material_one);
			scene.add(shape_one);

            // shape_two
			const geometry_two= new THREE.SphereGeometry(0.5, 32, 16);
			const material_two = new THREE.MeshBasicMaterial({color: 0x00ff00});
			const shape_two = new THREE.Mesh(geometry_two, material_two);
            shape_two.position.x = 1;

            // shape_three
            const geometry_three= new THREE.SphereGeometry(0.5, 32, 16);
			const material_three = new THREE.MeshBasicMaterial({color: 0xff0000});
			const shape_three = new THREE.Mesh(geometry_three, material_three);
            shape_three.position.x = -1;
			
            // adding children
			shape_one.add(shape_two);
            shape_one.add(shape_three);

            // populating scene
            scene.add(shape_one);

			function animate() {
				requestAnimationFrame(animate);

				shape_one.rotation.y += 0.01;

				renderer.render(scene, camera);
			};

			animate();
		</script>
	</body>
</html>

codemirror

Removing a child from the parent object will make the scene graph look the following illustration:

<html>
	<head>
		<title>Three Remove</title>
		<style>
			body { margin: 0; }
		</style>
	</head>
	<body>
		<script src="https://threejs.org/build/three.js"></script>
		<script>

            // scene
			const scene = new THREE.Scene();

            // camera
			const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.position.z = 3;

            // renderer
			const renderer = new THREE.WebGLRenderer();
			renderer.setSize(window.innerWidth, window.innerHeight);
			document.body.appendChild(renderer.domElement);

            // light
            const light = new THREE.AmbientLight (0xffffff, 0.5);
            scene.add(light);

            // shape_one
			const geometry_one = new THREE.BoxGeometry(1, 1, 1);
			const material_one = new THREE.MeshBasicMaterial({color: 0xffff00});
			const shape_one = new THREE.Mesh(geometry_one, material_one);
			scene.add(shape_one);

            // shape_two
			const geometry_two= new THREE.SphereGeometry(0.5, 32, 16);
			const material_two = new THREE.MeshBasicMaterial({color: 0x00ff00});
			const shape_two = new THREE.Mesh(geometry_two, material_two);
            shape_two.position.x = 1;

            // shape_three
            const geometry_three= new THREE.SphereGeometry(0.5, 32, 16);
			const material_three = new THREE.MeshBasicMaterial({color: 0xff0000});
			const shape_three = new THREE.Mesh(geometry_three, material_three);
            shape_three.position.x = -1;
			
            // adding children
			shape_one.add(shape_two);
            shape_one.add(shape_three);

            // populating scene
            scene.add(shape_one);

			/**
			 * removing child
			*/

			// using remove()
			shape_one.remove(shape_three);

			// using removeFromParent();
			// shape_three.removeFromParent();

			function animate() {
				requestAnimationFrame(animate);

				shape_one.rotation.y += 0.01;

				renderer.render(scene, camera);
			};

			animate();
		</script>
	</body>
</html>

How to remove the child of an Object3D in three.js

         We can use two methods to remove the child of an Object3D class object which is present inside the three.js scene graph:The remove() methodThe removeFromParent() method

How to remove the child of an Object3D in three.js

Syntax

The `remove()` method

Parameters

The`removeFromParent()` method

Parameters

Code example

Code explanation

How to remove the child of an Object3D in three.js

Syntax

The remove() method

Parameters

TheremoveFromParent() method

Parameters

Code example

Code explanation

The `remove()` method

The`removeFromParent()` method