title: Removing svg text elements with d3.js
body: <p>I can change the value of the text with a smooth little tween, but every time I am emptying one svg and creating a new one. This eventually loads the DOM up with empty SVGs. How can I get rid of them? </p>
  
  <p>D3:</p>
  
  <pre><code>var vis = d3.select("#visualisation"),
          commasFormatter = '$' + d3.format(",.0f"),
          numVis = d3.select("#defecit"),
          defTotal = d3.select("#defense");
  
  
      function init () {
              //Initialize mean text
              numVis.append("text")
                  .attr("id", "meantext")
                  .attr("y", 40)
                  .attr("x", 118)
                  .style("font-size", "26px")
                  .style("font-family","Arial, Helvetica, sans-serif")
                  .style('font-weight', 'bold')
                  .style('text-color', '#525252');
  
              defTotal.append("text")
                  .attr("id", "defense")
                  .attr("y", 0)
                  .attr("x", 0)
                  .style("font-size", "16px")
                  .style("font-family","Arial, Helvetica, sans-serif")
                  .style('font-weight', 'bold')
                  .style('text-color', '#525252');
  
              d3.select("#meantext")
              .transition()
              .duration(500)
              .ease('linear')
              .tween("text", function() {
                  var i = d3.interpolate(this.textContent, dollars.value);
                  return function(t) {
                    this.textContent = '$' + d3.format(",")(Math.round(i(t)));
                  };
                })
  
  //Doing something like this didn't work - kept giving me an error that the object array had no exit function
  d3.select("meantext").exit().remove()
  
  
  
      }
  </code></pre>