title: Remove an SVG element upon click
body: <p>So for my assignment I have a webpage where I input a number and choose a shape and the chosen number amount of the chosen shape will appear and go through a set animation. After the animation, the shape will disappear, but before that, the shape should also disappear if its clicked. I've tried to use the remove() function but can't get this right. Please help.</p>
  
  <p>Here's my javascript:</p>
  
  <pre><code>draw = function() {
    var typed = $('#howmany').val()
    var shape = $('#shape').val()
    var SVG = $("svg");
    var x, y;
  
    for (var i = 0; i &lt; typed; i++) {
      x = Math.random() * 350
      y = Math.random() * 350
      if (shape == 'a') {
        pattern = paper.circle(25, 25, 25)
      }
      if (shape == 'b') {
        pattern = paper.rect(10, 10, 50, 50)
      }
      if (shape == 'c') {
        pattern = paper.path('M25,0 L50,50, L0,50 Z')
      }
  
      color_attr = {
          'fill': '#BB7'
      }
  
      position_attr = {
        'transform': 't' + x + ',' + y
      }
  
      pattern.attr(color_attr)
      pattern.animate(position_attr, 2000)
          pattern.click(remove())
          setTimeout(function(){
        SVG.find("circle").remove();
        SVG.find("rect").remove();
        SVG.find("path").remove();
      }, 2000);
    }
  }
  
  setup = function() {
    paper = Raphael('svg1', 400, 400)
    $('button').click(draw)
  }
  jQuery(document).ready(setup)
  </code></pre>
  
  <p>Here's the fiddle: <a href="https://jsfiddle.net/o6e2yu5b/3/" rel="nofollow noreferrer">https://jsfiddle.net/o6e2yu5b/3/</a></p>