deleting element drawn in an svg image

[Roo]

hello everybody,

I have a code that draws an itinerary on an svg element in a function.

I need when i Recall this function, the last element will be removed and a new one will be drawn.

I've used the remove() function of snap but it doesn't work.

Here is my code:

function tracingitinerarysnap(table_shortest_way,table1){
var x1,y1,y2,x2,tempPoint, myLen;
var element;
var k=0;
var trace=0;
var array=[]; //un tableau intermédiaire pour convertir les chaines de caractères en Objets.
for(var i=0;i<table_shortest_way.length;i++){


for ( var j=0;j<table1.length;j++) {
 if (table_shortest_way[i]== table1[j][0])
 { array.push(table1[j]);
 }
 }
}


if(k!=0)
{  
 s.remove(element);

 }
while(trace<array.length-1)
{
x1= array[trace][1];
y1= array[trace][2];
x2= array[trace+1][1];
y2= array[trace+1][2];

var y=y1-2;
var x=x1-2;
var y3=y2-3;
var x3=x2-3;
myLine =s.path( 'M'+x+','+y+'L'+x3+','+y3);
trace+=1;
myLen = myLine.getTotalLength();
 for( var a=0; a< myLen-1; a+=10 ) {
 tempPoint = myLine.getPointAtLength( a );
 dessin=s.text(tempPoint.x, tempPoint.y+8, '<').transform( 'r' + tempPoint.alpha ).attr({ strokeWidth: 1, stroke: "#FF0000"});
 }
}
k++;
}

so when we execute this function next time k will be equal to 1 and then it is different from zero. So it will delete the previous one and will draw a new itinerary with a new value of table_shortest_way.

Can anyone help me with that?

Thank you.

[Ian]

Try element.remove() rather than s.remove(element). If there's still a problem, put it on a jsfiddle.

Ian

[Roo]

hey Ian,

It doesn't work even with element.remove().

Here is my jsfiddle link and i put a buton in order to see if the element is shown and then removed or not. 

Or maybe if you have a better way to check out how the element is removed and then traced an other time, it will be with pleasure.

http://jsfiddle.net/roo5619/25DEs/ 

[h.t.d...@gmail.com]

As far as I can see, `k` is always `0` when you try to run `element.remove` in the selection with condition `k!=0`, i.e., `element.remove` will never be called ...

[Roo]

but there is k++ in the end so the execution will be like this:

- when it enter in the function the first time element.remove won't be executed 

- then it will draw the itinerary

- then k++

- the next call of the function , k=1 so normally element.remove() will be executed 

Am I wrong ?

[h.t.d...@gmail.com]

Your function (I cut the bits that aren't interesting to this issue):

    function tracing_itinerary_snap(){
            //..    
  
            var k=0;
             //..        

           if(k!=0) { 
                element.remove();
            }
   
            while(trace<array.length-1) {
                // ...
            }
            k++;
        };

You update k at the end of the function all right, but at the start of it, at *every* start, you set it to 0 again...,

[Roo]

agh yeah i see, so what i have to do ? in order to remove the old itinerary drawn and trace a new one when we recall the function ?

[h.t.d...@gmail.com]

There are different solutions to that problem, one could be to use that (empty) element as a parameter to the function, or to return the freshly itinerary drawn from the function and remove it before drawing a new one (or overwriting it). Another option is to use a (global) variable that is outside the function's scope to keep track of the itinerary. But these problems are javascript related, not snap.svg related. You might want to invest (time) in a javascript course or two.

[Roo]

hey I tried to do element.remove();

however it wasn't deleted from the svg image eventhough when i inspect element i get this :

u {id: "Shy18sfrk2l", node: text, type: "text", anims: Object, _: Object…}

1. _: Object
2. anims: Object
3. id: "Shy18sfrk2l"
4. matrix: n
5. node: text
6. realPath: Array[5]
7. removed: true
8. type: "text"
9. __proto__: u

so normally the function of remove is well exectued so why it doesn't disappear ?

[Ian]

As ever, I would isolate it on a fiddle.

[Roo]

here it is: http://jsfiddle.net/roo5619/25DEs/

[Ian]

I don't really understand from that code what you are trying to do...your element check only happens once against something thats undefined.

Maybe you need to explain more the logic of what you want to happen, and how you think it is trying to do that.

[Roo]

hey, 

I need to draw an itinerary and then when I execute an other time the same function, the old itinerary will be deleted and a new one will be drawn at its place.

so when we execute the function for the first time, the element is undefined because we didn't draw any thing yet. But when I re call this function, the element is no more undefined it contains the old itinerary and then I delete it and after that i draw a new itinerary by changing the value of element.

[h.t.d...@gmail.com]

I've made an example of re-using an existing element: http://jsfiddle.net/x9M5z/

It re-draws a random-sized circle at a random position when you click on the button. If the circle isn't created yet, create it first. You could add easily a remove-element step...

[h.t.d...@gmail.com]

I made the remove variant as well: http://jsfiddle.net/x9M5z/1/

Again, as Ian told you, it helps to bring a problem down to its bare minimum to solve it. After that, you can build on that solution to tackle your original problem in the more complex situation.