Snap.svg — remove an object when one of the elements was clicked

Question

I have an object with 3 elements bound in one group and I need to remove this object (or at least it's graphical representation — the group) when green rectangle is clicked. The a.click() works, but c.click() doesn't and I'd like to know why:

var s = Snap(500, 500);

function myObj() {

    this.g = s.group();

    this.drawIt = function() {

    var a = s.rect(0, 0, 50, 50, 0, 0).attr({'fill':'#E82941'}),
        b = s.rect(20, 20, 50, 50, 0, 0).attr({'fill':'#FF6E00'}),
        c = s.rect(40, 40, 50, 50, 0, 0).attr({'fill':'#00C049'});

        this.g.append(a, b, c);

        a.click(function(e){this.attr({'fill':'#000'});});
        c.click(this.killIt);
    }

    this.killIt = function() {
        this.g.remove();    
    }

}

var obj = new myObj();

obj.drawIt();

Snap.svg 0.3.0.

…

Solved: http://codepen.io/GeMir/pen/KwbBqV

score 3 · Accepted Answer · answered Mar 21 '15 at 18:36

3

Its the problem of closure, the this inside the c.click handler doesn't represent myObj.

Declare a variable var that=this; inside the constructor myObj like below

function myObj() {

  var that = this;

  this.g = s.group();

  this.drawIt = function() {
    var a = s.rect(0, 0, 50, 50, 0, 0).attr({'fill':'#E82941'}),
        b = s.rect(20, 20, 50, 50, 0, 0).attr({'fill':'#FF6E00'}),
        c = s.rect(40, 40, 50, 50, 0, 0).attr({'fill':'#00C049'});

        this.g.append(a, b, c);

        a.click(function(e){this.attr({'fill':'#000'});});
        c.click(function(e){that.killIt()});
  }

  this.killIt = function() {
            this.g.remove();    
  }

}

var obj = new myObj();

obj.drawIt();

If you declare a function inside another function, the this variable will not be the same as that of parent function. in this case, it will be pointed to the cobject, In the case of a.click, as the this is pointed to a, it worked.

answered Mar 21 '15 at 18:36

Prashanth Pamidi

266
2
6

Thank you! that.killIt() removes only "a" not the complete group. Is there a way to remove the group including "a", "b" and "c" shapes? – georgmierau Mar 21 '15 at 18:56
Coz, only `a` is present in the `g`, instead of `this.append(a,b,c)` try `this.g.append(a); this.g.append(b);this.g.append(c);` . It worked. – Prashanth Pamidi Mar 21 '15 at 19:00
Thank you! I never used append with multiple parameters before. – georgmierau Mar 21 '15 at 19:06
Out of interest would it also be valid to replace `this.killIt` with `() => {this.killIt()}` ? – Dave E Aug 28 '17 at 12:11

Snap.svg — remove an object when one of the elements was clicked

1 Answers1