Removing already drawn object THREE
<p>I´m trying to make a code for spline observation.My problem is, I've created a menu so I can choose between splines, however when I select the next one, the spline that has been drawn before doesn´t disappears even though I tried to remove from the scene.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt; Brincando &lt;/title&gt;
      &lt;style&gt;
        body { margin: 0; }
        canvas { width: 100%; height: 100% }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;script src="js/three.js"&gt;&lt;/script&gt;
    &lt;script src="js/TrackballControls.js"&gt;&lt;/script&gt;
    &lt;script&gt;
      var camera, cameraControls,scene,renderer,dropdown,container,info;
      var numPoints = 100;
  
      sampleSpline = new THREE.CatmullRomCurve3([
        new THREE.Vector3(0, 0, 0),
        new THREE.Vector3(0, 200, 0),
        new THREE.Vector3(150, 150, 0),
        new THREE.Vector3(150, 50, 0),
        new THREE.Vector3(250, 100, 0),
        new THREE.Vector3(250, 300, 0)
      ]);
  
      sampleSpline2 = new THREE.CatmullRomCurve3([
        new THREE.Vector3(0, 0, 0),
        new THREE.Vector3(0, -200, 0),
        new THREE.Vector3(-150, -150, 0),
        new THREE.Vector3(-150, -50, 0),
        new THREE.Vector3(-250, -100, 0),
        new THREE.Vector3(-250, -300, 0)
      ]);

      sampleSpline.type='catmullrom';
      sampleSpline2.type='catmullrom';
  
      var splines ={
        sampleSpline: sampleSpline,
        sampleSpline2: sampleSpline2
      };
  
      var dropdown = '&lt;select id="dropdown" onchange="addSpline(this.value)"&gt;';
      var s;
      for ( s in splines ) {
        dropdown += '&lt;option value="' + s + '"';
        dropdown += '&gt;' + s + '&lt;/option&gt;';
      }
      dropdown += '&lt;/select&gt;';

      function addSpline(){
  
        var value = document.getElementById('dropdown').value;
        var selectspline = splines[value];
  
        if(line)
        {
          scene.remove(line);
        }
  
        var material = new THREE.LineBasicMaterial({
          color: 0xff00f0,
        });

        var geometry = new THREE.Geometry();
        var splinePoints = selectspline.getPoints(numPoints);

        for(var i = 0; i &lt; splinePoints.length; i++)
        {
          geometry.vertices.push(splinePoints[i]);  
        }
 
        var line = new THREE.Line(geometry, material);
        scene.add(line);
  
      }
  
      init();
      animate();
  
      function init()
      {
        container = document.createElement('div');
        document.body.appendChild(container);
  
        info = document.createElement('div');
        info.style.position = 'absolute';
        info.style.top = '10px';
        info.style.width = '100%';
        info.style.textAlign = 'center';
        info.innerHTML = dropdown;
        container.appendChild(info);
  
        renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth,window.innerHeight);
        document.body.appendChild( renderer.domElement );
 
        camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,10000);
        camera.position.z= 700;
  
        cameraControls = new THREE.TrackballControls(camera,renderer.domElement)
  
        cameraControls.rotateSpeed = 5.0;
        cameraControls.zoomSpeed = 1.0;
  
        cameraControls.noZoom = false;
        cameraControls.noPan = true;
  
        cameraControls.staticMoving = true;
        cameraControls.dynamicDampingFactor = 0.3;
  
        cameraControls.addEventListener('change',render);
  
        scene = new THREE.Scene(); 
  
        camera.lookAt(scene.position);
 
        addSpline();
 
        renderer.setClearColor(0xdddddd, 1);

        window.addEventListener( 'resize', onWindowResize, false );
  
        render();
      }
 
      function onWindowResize() 
      {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize( window.innerWidth, window.innerHeight );
        cameraControls.handleResize();
        render();
      }
 
 
      function animate() 
      {
        requestAnimationFrame( animate );
        cameraControls.update();
      }
      function render()
      {
        renderer.render( scene, camera );
      }
  
    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>