CODEWITHSUNDEEP
javascriptjquerysvgd3.jsraphael
TLDAN
TLDAN

Reputation: 53

issues with Raphaël and removing objects within svg

if you open the code pen there is a fire button. it will launch a bunch of ellipses and then when it hits it will cause a burst. if you look the ellipses ,which there are two sets of, they are still there. I have tried using the below

d3.selectAll("ellipse").remove()
$("ellipse").remove()
$("ellipse").each(function(){this.remove()})

http://codepen.io/daniel667/pen/QwMWrm

the code pen above will help show what im talking about the second fire button to the far right is what ive been trying to use to kill the ellipses so I don't wait for the animation the functions at the very bottom.

Upvotes: 0

Views: 50

Answers (1)

Ian
Ian

Reputation: 13852

I would create a Raphael set, or an array and store the elemets in that, so you can reference them later to remove. If they will be used repeatedly, it may be worth not removing them, but just hiding them rather than recreating each time.

var mySet;
...
mySet = paper.set();
mySet.push( circi );

....
function throwss() {
  mySet.forEach( function( el ) { el.remove(); });
}

Example: codepen

For speed, you may also want to look into Velocity.js, also be aware for animation filters can be quite resource heavy.

Upvotes: 1

Related Questions