单击后删除SVG元素

Question

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.

Here's my javascript:

draw = function() {
  var typed = $('#howmany').val()
  var shape = $('#shape').val()
  var SVG = $("svg");
  var x, y;

  for (var i = 0; i < 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)

Here's the fiddle: https://jsfiddle.net/o6e2yu5b/3/

Answer 1

You need to bind the click event to the pattern and remove it, when clicked. As per your code, you need to attach an event handler using an IIFE, so you dont run into issues with the closure.

Here is what you could do.

(function(currentPattern) {
  currentPattern.node.onclick = function(){
    currentPattern.remove();
  };
})(pattern);

Here is the updated jsFiddle

Answer 2

i don't know if you need to remove all the shapes or one specific clicked shape. In case you want to remove all, just add this function before your setTimeout function:

    $('body').click(function(e){
    var element = e.target.tagName;
    if (element === 'circle')
{    SVG.find(element).remove(); }
});

if you want to delete a specific one, try to identify each circle by an ID then make an if statement to delete the shape that has the ID of the clicked element.

Answer 3

I guess you needed a small rectification in your JS snippet and it work. Just replace the removal code with this:

pattern.click(pattern.remove)

 draw = function() { var typed = $('#howmany').val() var shape = $('#shape').val() var SVG = $("svg"); var x, y; for (var i = 0; i < 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(pattern.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) 

 body { max-width: 40em; line-height: 1.6; margin: 0 auto; padding: 0.5em; color: black; font-family: "Helvetica", "Arial", sans-serif; } h1, h2, h3 { line-height: 1.2; color: black; } @media print { body { line-height: 1.4; } } svg { border: thin solid black; } input { width: 2em; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <main> <h1>Assignment 4 : Zap-em</h1> <p>Difficulty: <input type="text" id="howmany" /> </p> <p> Shape: <select id="shape"> <option value="a">Circle</option> <option value="b">Square</option> <option value="c">Triangle</option> </select> </p> <button id="btn">Start</button> <div id="svg1"></div> </main> 

Updated fiddle here . Read more about click and remove .