title: d3 Click to create circle and click to remove
body: <p>I am trying to click on a circle to remove it, but clicking on the canvas will create a circle. </p>
  
  <p>I do want to actually remove the circle and it's object from the data, as opposed to just making it transparent.</p>
  
  <p>On click on a circle calls the function</p>
  
  <pre><code>  function removeElement(d) {
      d3.select(this)
        .remove();
    }
  </code></pre>
  
  <p>This function is called with a basic click on the circle,</p>
  
  <pre><code>  .on("click", removeElement);
  </code></pre>
  
  <p>I think I'm not correctly distinguishing between clicking on the canvas to create a circle where none exists and clicking on an existing circle to remove it.</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;meta charset="utf-8"&gt;
  &lt;style&gt;
    .active {
      stroke: #000;
      stroke-width: 2px;
    }
  &lt;/style&gt;
  &lt;svg width="960" height="500"&gt;&lt;/svg&gt;
  &lt;script src="//d3js.org/d3.v4.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
    var svg = d3.select("svg"),
      width = +svg.attr("width"),
      height = +svg.attr("height"),
      radius = 32;
  
    var data = [{
        x: 100,
        y: 200
      },
      {
        x: 200,
        y: 300
      },
      {
        x: 300,
        y: 200
      },
      {
        x: 400,
        y: 300
      }
    ];
  
    var xScale = d3.scaleLinear()
      .domain([0, d3.max(data, function(d) {
        return d.x_pos
      })]).range([0, width]);
  
    svg.selectAll("circle")
      .data(data)
      .enter().append("circle")
      .attr("cx", function(d) {
        return d.x;
      })
      .attr("cy", function(d) {
        return d.y;
      })
      .attr("r", radius)
      .style("fill", "lightblue")
      .attr('id', function(d, i) {
        return 'rect_' + i;
      })
      .call(d3.drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended))
      .on("click", removeElement);
  
    svg.on("click", function() {
      var coords = d3.mouse(this);
  
      var newData = {
        x: d3.event.x,
        y: d3.event.y
      };
  
      data.push(newData);
  
      svg.selectAll("circle") // For new circle, go through the update process
        .data(data)
        .enter()
        .append("circle")
        .attr("cx", function(d) {
          return d.x;
        })
        .attr("cy", function(d) {
          return d.y;
        })
        .attr("r", radius)
        .style("fill", "red")
        .attr('id', function(d, i) {
          return 'circle_' + i;
        })
        .call(d3.drag()
          .on("start", dragstarted)
          .on("drag", dragged)
          .on("end", dragended))
        .on("click", removeElement);
    })
  
    function dragstarted(d) {
      d3.select(this).raise().classed("active", true);
    }
  
    function dragged(d) {
      d3.select(this)
        .attr("cx", d.x = d3.event.x)
        .attr("cy", d.y = d3.event.y);
    }
  
    function dragended(d) {
      d3.select(this)
        .classed("active", false);
    }
  
    function removeElement(d) {
      // need to remove this object from data
      d3.select(this)
        .remove();
    }
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This question is an extension of the question <a href="https://stackoverflow.com/questions/46384860/d3-remove-circle-on-dbclick">D3 remove circle on dbclick</a></p>
  
  <p>Thanks,</p>