title: d3 remove text from svg
body: <p>I have sliders that modify the S command of a path. I want the source name to appear on the path which it does; however how do I remove the previously created text element?  I have tried to remove it (see code below) but it doesn't work. The dom just fills up with extra text elements and the text on the path gets darker and darker as they start to pile up on each other.  I have even tried to check for the text element by id as shown but no go.  Hope you can shed any light on how to remove the text element so there is just one as each S command is modified. </p>
  
  <p>I have added a fiddle here (append text at very bottom of code window): 
  <a href="https://jsfiddle.net/eformx/pnh05au0/" rel="nofollow">fiddle...</a></p>
  
  <pre><code>graph.links.forEach(function (d, i) {
          //console.log(obj[0].text, graph.links[i].source.name, graph.links[i].linkid);
  
          if (graph.links[i].source.name == obj[0].text) {
  
              var linkid = graph.links[i].linkid;
              var the_path = $("#" + linkid).attr("d");
              var arr = $("#" + linkid).attr("d").split("S");
  
              //update S command
              $("#" + linkid).attr("d", arr[0] + " S" + scommand_x2 + "," + scommand_y2 + " " + scommand_x + "," + scommand_y);
  
              svg.select("#txt_" + linkid).remove();
  
              svg.selectAll("#" + linkid).data(graph.links).enter()
                  .append("text")
                  .attr("id", "txt_" + linkid)
                  .append("textPath")
                  .attr("xlink:href", function (d) {
                      return "#" + linkid;
                  })
                  .style("font-size", fontSize + "px")
                  .attr("startOffset", "50%")
                  .text("")
                  .text(graph.links[i].source.name);
  
          }
      });
  </code></pre>