Question

I have a problem to remove last path cloned.
I want, when I click on one path that its clone appears and when I click on another path, the last path cloned disappears or animates scale to the original to remove it and another one created. Can someone show me how do that?

My code :

var paper = Raphael("paper", 1000, 1000);

var mg = {};

mg.rg1a = this.paper.path("..." ).initZoom();
mg.rg2a = this.paper.path("..." ).initZoom();
mg.rg3a = this.paper.path("..." ).initZoom();


for (var state in mg) {

mg[state].setAttr({
      fill:           "#c7c6c5",
      stroke:         "#CFCFCF",
      "stroke-width": 1
    });



   (function (st, state) {
st[0].style.cursor = "pointer";

mg[state].click(function(){

                             var temp = mg[state].clone();
           temp.animate({'transform':"s2 2"}, 500);
           temp.setAttr({
      fill:           "#FF6600",
      stroke:         "#FFFB00",
      "stroke-width": 1 });


    });



})(mg[state], state);

}

Answer 1

I can solve this for you, but I’m not sure that’d be helpful.

You’ve made a couple of errors in the fiddle that will need to be fixed before you can tackle your problem.

1 Raphael doesn’t have a function called setAttr(). It does have a function called attr().

[2] You’re using transforms to scale your clone. Transforms came in in Raphael 2.0, but your fiddle is using raphael 1.5.2. Probably you just set it up incorrectly, but I thought I’d point it out.

To fix your particular issue is very simple. You just need to hold onto a reference to the clone you created. Every time you click on something, check if the reference points to an object. if it does, then remove it using .remove(). This way you’ll nuke the old clone just before you create the new one.

If you’re really stuck, reply and I’ll give you the working version of your fiddle I’ve created. Give it a go first though.

N.

PS. firebug and webdeveloper are two browser extensions you should use if you’re not doing it already. It takes the guessing out of a lot of errors.

---

since you asked nicely, here’s your modified fiddle. I’ve added a variable called cloneHolder. Whenever you click, you check to see if cloneHolder refers to anything, and if it does, you remove it using cloneHolder.remove(). You could change the code to animate your clone disappearing before you remove it if you like.