How to delete jsPlumb connection

Question

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

Phinney

The link now leads to a linkfarm. – Enjoy

Answer 1

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.

Marillin

Hope this helps someone - If you delete a connection between two elements, then you delete the two elements, and then you create two new elements with the same IDs and try to connect them, jsplumb will get confused due to an internal cache it keeps. You must call .reset() on your jsPlumb instance. – Vuong

Answer 2

Update: jsPlumb no longer implements the detach method. Please see Rafik Bari's answer below for a more up-to-date solution.

If you've multiple connections from or to elements, detaching all connections is maybe not the best solution to delete a connection. There is a (not well documented) function to detach exactly one connection:

jsPlumb.detach(connection, {
    fireEvent: false, //fire a connection detached event?
    forceDetach: false //override any beforeDetach listeners
})

In my example, I want to delete a connection when the connector is clicked:

 jsPlumb.bind('click', function (connection, e) {
     jsPlumb.detach(connection);
 });

Matchmaker

This answer is outdated, jsPlumb.detach() doesn't exist in the API anymore, use jsPlumb.deleteConnection() instead (see Rafik Bari's response) – Plascencia

Answer 3

I found the solution in the documentation (http://jsplumb.org/doc/usage.html)

jsPlumb.detachAllConnections("elementId");

Phinney

Answer 4

If source div or target div id is already known, then you can delete the connection like this:

var conn = jsPlumb.getConnections({
              //only one of source and target is needed, better if both setted
              source: sourceId,
              target: targetId
            });
if (conn[0]) {
  jsPlumb.detach(conn[0]);
}

You can also use jsPlumb.getAllConnections() to get the array of all connections, and test every connection's sourceId or targetId to get exactly the connection you need;

Tedie

Answer 5

After all the endpoint connections, to and from the element are deleted, you need to detach it as shown in the 3rd line

jsPlumb.detachAllConnections(divID);
jsPlumb.removeAllEndpoints(divID);
jsPlumb.detach(divID); 
divID.remove()

Goldsberry

Worked for me. But I used an instance of jsPlumb instead of calling it directly: g_instance = jsPlumb.getInstance(...., Container: "flowchart-demo") and then: g_instance.detachAllConnections(divID); – Chapatti

Detaching the connections leaves all Endpoints in place without disorienting the rest of the graph by considering its relativity. So as long as it is performed, the way in which the instances are taken wouldn't really affect the rest of the code. – Goldsberry

Answer 6

jsPlumb.deleteConnectionsForElement(elementId)

works. Though it's old I'd like to add that finding out what methods a library has, provided it's self descriptive enough is quite easy.

dev tools

Annamarieannamese

Answer 7

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]);
        }

Paratuberculosis

Answer 8

This code removes all "wrong" connections in a game I'm developing. I hope it helps

var wrong_connections = new Array(DB_ID, ANOTHER_DB_ID);
var connections = jsPlumb.getConnections();
$.each(connections, function(index, value) { // going through all connections
  var source_id = value.source.attr('id').substring(28);  // I need the ID from DB so I`m getting it from the source element
  for (var a = 0; a < wrong_connections.length; a++) {  
    if (source_id == wrong_connections[a]) {
      jsPlumb.detach(value);
    }
  }
});

Lemley

Answer 9

Hi you can refer to this: Detach connection jsPlumb

This block of code allows to detach connection if a connection was clicked:

jsPlumb.bind("click", function(conn) {
    jsPlumb.detach(conn);
});

Mckeon

Answer 10

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)

Udine

Answer 11

To delete connection worked for me

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

Respectively