title: RaphaelJS remove element on click
body: <p>I'd like to remove a shape when I click on it and if the delete radio button is "true". For now I'm only able to delete the whole Raphael paper. Can somebody help me ?
  I use RaphaelJS and Jquery.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;html lang="en" style="height: 100%;"&gt;
  &lt;head&gt;
      &lt;script src="raphael-min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="jquery-min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="app.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;input type='radio' id='un' name="action" value="un"&gt;draw un&lt;/button&gt;
      &lt;input type='radio' id='deux' name="action" value="deux"&gt;draw deux&lt;/button&gt;
      &lt;input type="radio" id='remove' name="action" value="remove"&gt; remove
  
  
    &lt;div id="holder"&gt;
    &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>JS</strong> </p>
  
  <pre><code>$(document).ready(function() {
        var paper = Raphael('holder', '800', '600');
        var mySet = paper.set();
  
        var tojsonplease =        [
              {
                  category: 'playground',
                  type: "rect",
                  x: 10,
                  y: 10,
                  width: 600,
                  height: 300,
                  fill: "#eee"
              }];
          paper.add(tojsonplease);      
  
          addme = function(cat, myX, myY) {
              switch (cat) 
              { 
              case '1' : 
              specs = {
                  category: '1',
                  type: 'rect',
                  x: myX,
                  y: myY,
                  width: 20,
                  height: 20,
                  fill: 'yellow'
              };
              break; 
              case '2': 
              specs = {
                  category: '2',
                  type: 'rect',
                  x: myX,
                  y: myY,
                  width: 10,
                  height: 20,
                  fill: 'red'
              };  
              break;
              }
              var newElement = new Array();
                  newElement[0] = specs;
              tojsonplease.push(specs);
              paper.add(newElement);
              console.log(tojsonplease);
          };
  
          $('#holder').click(function () {
  
  
              if ($("#remove").is(":checked")) {
                  paper.remove();
              };
              if ($("#deux").is(":checked")) {
                  SX = event.pageX - $(document).scrollLeft() - $('#holder').offset().left;
                  SY = event.pageY - $(document).scrollTop() - $('#holder').offset().top;
                  addme('1', SX, SY);
              };
              if ($("#un").is(":checked")) {
                  SX = event.pageX - $(document).scrollLeft() - $('#holder').offset().left;
                  SY = event.pageY - $(document).scrollTop() - $('#holder').offset().top;
                  addme('2', SX, SY);
              };
  
  
              }); 
      });    
  </code></pre>