How to delete snap.svg element on click

Question

How to delete svg when I click on it? I am using the lib snapsvg . I have plunkered my issue.

The use case is as follows : when user clicks on the svg, I create a circle at the position the user clicked, and if the user clicks on a circle that has been created, I want to delete the circle. I have a strange behavior because the circle is moved but not deleted.

(function() {
  var s = Snap("#svg");
  s.rect(10, 10, 400, 400);
  s.click(handleClick);

  function handleClick(event) {
    var e = event.target;
    var dim = e.getBoundingClientRect();
    var x = event.clientX - dim.left;
    var y = event.clientY - dim.top;

    var c = this.circle(x, y, 10);
    c.attr({
      fill: '#FFF'
    })

    c.click(function() {
      console.log('click circle');
      this.remove();
    });
  }

})();

Answer 1

I managed to find the solution, the element was not moving, actually it was removed but an other was created. To solve my issue I have just added event.stopPropagation(); inside c.click function :

c.click(function(event) {
  console.log('click circle');
  this.remove();
  event.stopPropagation();
});