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?

D3:

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()







    }