title: How do I remove the old SVG elements and then replace it with a new one?
body: <p>So I have been working on this code and I have gotten it to work. My problem is that it works perfectly for the first input, but if the user keeps putting in inputs the new picture overlaps the old. I have successfully coded in the ability for the ellipse to be replaced when a new input is given, but I am having trouble with doing the same for all my path and marker elements. My entire code is below (separated into its individual files) what do I need to add in order to replace the old image with the new one?</p>
  
  <p>main.js
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function eccentricityChanged(){
  
    let svg = document.getElementById('diagram');
  
    let temp = document.getElementById('mytext');
    if (temp) {
      temp.remove();
    }
  
    let s = 100;
    let omega = 0.5;
    let A = 0.2084558583;
    let B = 0.7915441417;
  
    let e = document.getElementById('eccentricity').value;
    let formFactor = A * e + B;
    let eccent = Math.sqrt(Math.pow(e, 2)/(1-Math.pow(e,2)));
    let p = (1 + 1/(Math.pow(eccent, 2)))*(1-(1/eccent)*Math.atan(eccent))-(1/3);
    let q = (1/eccent)*(1+3/(Math.pow(eccent, 2)))*Math.atan(eccent)-3/(Math.pow(eccent, 2));
    let omegaStable = Math.sqrt((15/4)*q*(1-(3/5)*formFactor));
    let apperantGravA = Math.pow(1-Math.pow(e,2), -1/6)*(1-(1+p/q)*Math.pow(omegaStable, 2));
    let apperantGravB = Math.pow(1-Math.pow(e,2),1/3)*(1+2*p/q*Math.pow(omegaStable,2));
    let a = Math.pow((1-Math.pow(e,2)),-1/6);
    let b = Math.pow((1-Math.pow(e,2)),1/3);
    let scaleFactor = 150;
    let eqRad = a*scaleFactor;
    let polRad = b*scaleFactor;
  
    let latitude = [Math.PI/6, Math.PI/4, Math.PI/3];
    let latitudeLength = latitude.length;
    var i;
  
    for (i of latitude) {
      let rho = (a*Math.cos(i))/Math.sqrt(1-Math.pow(e*Math.sin(i),2));
      let z = -(a*(1-Math.pow(e,2))*Math.sin(i))/Math.sqrt(1-Math.pow(e*Math.sin(i),2));
      let lattGrav = (a* apperantGravA*Math.pow(Math.cos(i),2)+b*apperantGravB*Math.pow(
          Math.sin(i),2))/Math.sqrt(Math.pow(a*Math.cos(i),2)+Math.pow(b*Math.sin(i),2));
      let gravRho =-lattGrav*Math.cos(i)-Math.pow(omegaStable,2)*rho;
      let gravZ = -lattGrav*Math.sin(i);
      let accelCent = Math.pow(omega,2)*rho;
      calculateValues(rho, z, lattGrav, gravRho, gravZ, accelCent, polRad,s);
    }
  
    makeEllipse(eqRad,polRad);
  
  }
  
  function makeEllipse(eqRad,polRad) {
    let svg = document.getElementById('diagram');
  
    let temp = document.getElementById('mydiagram');
    if (temp) {
      temp.remove();
    }
    let ellipse = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    ellipse.setAttribute('d', `M 400 100 a ${polRad},${eqRad} 90 1,0 1,0 z`);
    ellipse.style.fill = 'transparent';
    ellipse.style.stroke = 'black';
    ellipse.style.strokeWidth = '5px';
    ellipse.setAttribute('id', 'mydiagram');
    svg.appendChild(ellipse);
  }
  
  function calculateValues(rho, z, lattGrav, gravRho, gravZ, accelCent, polRad,s) {
    let rho1 = rho*150 + 400;
    let z1 = z*150 + 100 + polRad;
  
    let rho2 = rho1 + s*gravRho;
    let z2 = z1- s*gravZ
  
    let rho3 = rho2 + s*accelCent;
    console.log(rho1, rho2, rho3, z1,z2);
  
    gravityVector(rho1, z1, rho2, z2, rho3, gravRho, gravZ, s, polRad);
    accelCentVector(rho1, z1, rho2, z2, rho3, gravRho, gravZ, s, polRad);
    apperantGravVector(rho1, z1, rho2, z2, rho3, gravRho, gravZ, s, polRad);
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Vectors.js</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-js lang-js prettyprint-override"><code>function gravityVector(rho1, z1, rho2, z2, rho3, gravRho, gravZ, s, polRad) {
      let svg = document.getElementById('diagram');
  
      let marker= document.createElementNS('http://www.w3.org/2000/svg',
          'marker');
      marker.setAttribute('id', 'triangle');
      marker.setAttribute('viewBox', '0 0 10 10');
      marker.setAttribute('refX', '0');
      marker.setAttribute('refY', '5');
      marker.setAttribute('markerUnits', 'strokeWidth');
      marker.setAttribute('markerWidth', '10');
      marker.setAttribute('markerHeight', '8');
      marker.setAttribute('orient', 'auto');
  
      let path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
      path.setAttribute('d', `M ${rho2} ${z2} l 5 0 l -5 10 l -5 -10 z`);
      path.style.stroke = 'green';
      path.style.strokeWidth = '5px';
      svg.appendChild(path);
  
      let arrow = document.createElementNS('http://www.w3.org/2000/svg', 'path');
      arrow.setAttribute('d', `M ${rho1},${z1} L ${rho2} ${z2}`);
      arrow.setAttribute('id', 'gravPath')
      arrow.style.stroke = 'black';
      arrow.style.strokeWidth = '2px';
      svg.appendChild(arrow);
      arrow.setAttributeNS('marker-end', 'triangle', 'void');
  }
  
  function accelCentVector(rho, z, rho2, z2, rho3, gravRho, gravZ, s, polRad) {
      let svg = document.getElementById('diagram');
  
      let marker= document.createElementNS('http://www.w3.org/2000/svg',
          'marker');
      marker.setAttribute('id', 'triangle');
      marker.setAttribute('viewBox', '0 0 10 10');
      marker.setAttribute('refX', '0');
      marker.setAttribute('refY', '5');
      marker.setAttribute('markerUnits', 'strokeWidth');
      marker.setAttribute('markerWidth', '10');
      marker.setAttribute('markerHeight', '8');
      marker.setAttribute('orient', 'auto');
  
      let path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
      path.setAttribute('d', `M ${rho3} ${z2} l 5 0 l -5 10 l -5 -10 z`);
      path.style.stroke = 'black';
      path.style.strokeWidth = '5px';
      svg.appendChild(path);
  
      let arrow = document.createElementNS('http://www.w3.org/2000/svg', 'path');
      arrow.setAttribute('d', `M ${rho2},${z2} L ${rho3} ${z2}`);
      arrow.setAttribute('id', 'accelCentPath');
      arrow.style.stroke = 'red';
      arrow.style.strokeWidth = '2px';
      svg.appendChild(arrow);
      arrow.setAttributeNS('marker-end', 'triangle', 'void');
  }
  
  function apperantGravVector(rho, z, rho2, z2, rho3, gravRho, gravZ, s, polRad) {
      let svg = document.getElementById('diagram');
  
      let marker= document.createElementNS('http://www.w3.org/2000/svg',
          'marker');
      marker.setAttribute('id', 'triangle');
      marker.setAttribute('viewBox', '0 0 10 10');
      marker.setAttribute('refX', '0');
      marker.setAttribute('refY', '5');
      marker.setAttribute('markerUnits', 'strokeWidth');
      marker.setAttribute('markerWidth', '10');
      marker.setAttribute('markerHeight', '8');
      marker.setAttribute('orient', 'auto');
  
      let path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
      path.setAttribute('d', `M ${rho3} ${z2} l 5 0 l -5 10 l -5 -10 z`);
      path.style.stroke = 'black';
      path.style.strokeWidth = '5px';
      svg.appendChild(path);
  
      let arrow = document.createElementNS('http://www.w3.org/2000/svg', 'path');
      arrow.setAttribute('d', `M ${rho},${z} L ${rho3} ${z2}`);
      arrow.style.stroke = 'blue';
      arrow.style.strokeWidth = '2px';
      svg.appendChild(arrow);
      arrow.setAttributeNS('marker-end', 'triangle', 'void');
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>index.html</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;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;CS 5890&lt;/title&gt;
          &lt;script src="https://d3js.org/d3.v5.min.js"&gt;&lt;/script&gt;
          &lt;style&gt;
            rect {
              fill: #9f009f;
              stroke-width: 0;
            }
            polyline {
              stroke: #00ff00;
              fill: none;
              stroke-width: 3;
            }
            line {
              stroke: #00ff00;
              fill: none;
              stroke-width: 3;
            }
            path {
              stroke: #0000ff;
              fill: #0000ff;
              stroke-width: 0;
            }
            circle {
              stroke-width: 0;
              fill: #009900;
            }
            text {
              font-size: 18px;
            }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body id="body"&gt;
        Eccentricity: &lt;input id="eccentricity" onchange="eccentricityChanged()"&gt;&lt;/input&gt;
        &lt;p&gt;Enter a value between 0 and 1 for the Eccentricity&lt;/p&gt;
  
        &lt;br&gt;
        &lt;svg width="800" height="800" id="diagram"&gt;
        &lt;/svg&gt;
        &lt;g id="diagram-elements"&gt;
            &lt;path id =''&gt;
        &lt;/g&gt;
        &lt;script src="Vectors.js"&gt;&lt;/script&gt;
        &lt;script src="main.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>