How to properly remove a Raphael SVG element refer

Question

I have a set of animated Raphael SVG elements. I am adding new elements and removing old ones with user initiated ajax calls. I set.push() the new elements but because the elements I need to remove are frequently not the last elements in the set, I am using element.remove() instead of set.pop(). This leaves a removed element in the set, which when I call set.animate(), causes the animation callback method to NOT be called. Perhaps this is a bug in Raphael 1.5.2.

jsFiddle example: http://jsfiddle.net/G7fAQ/

Is there a better way to remove elements that are referenced in an animated set? Or do I simply have to manually manage the set.items array, set.length variable, and set elements when I call the element.remove()?

i.e. http://jsfiddle.net/G7fAQ/1/

Thanks

Answer 1

This may be an addition since the given answer, but set.exclude(elem) works now. For example:

var set = paper.set(),
    elem = paper.circle(50, 50, 25);
set.push(elem) // elem now in set
set.exclude(elem) // what once was, forever may not be.

Answer 2

To remove an element from an array (which is what a Raphael set is, after all), you can use the splice function.

If you know the index of the element in the array, it's as simple as:

set.items.splice(index);

This will remove the index-th element from the array. splice returns the removed element, so if you need to remove() it or animate it off the screen, you can.

Edit: splice takes two arguments, the index in the array to remove, and how many elements you want to remove (plus any number of additional arguments which are members to add to the array, which you don't need here).

Code should read:

set.items.splice(index, 1);