How to delete jsPlumb connection

Viewed 16662

I am playing with jsplumb, but I am not able to delete the connection between two divs having only the id of one div.

11 Answers

To delete a connection use the following code:

jsPlumb.deleteConnection(con)

For some reason, detach did not work for me. The method above is not mentioned in their docs, probably they forgot to correct their docs.

Firtsly, you can find your connection by using sourceId and targetId

var connections = jsPlumb.getConnections({
            source: sourceId ,
            target:targetId  
        });

This will return an array of jsPlumb connections, so you can delete all connections related to this source and target id.

for(var i=0;i < connections.length;i++) {
            jsPlumb.deleteConnection(connections[i]);
        }

I want to update the answer. For version 2.5, if you use

jsPlumb.detach()

you may get error message that: jsPlumb.detach() is not a function. And I also try

jsPlumb.deleteConnection(conn)

the connection is deleted indeed, however, I'm not sure why the endpoint just detach from the div. Finally, it is solved by

instance.deleteConnection(conn)

To delete connection worked for me

jsPlumb.bind("click", function(conn) {
    // alert(JSON.stringify(data));
    jsPlumb.deleteConnection(conn);
 });
Related