如何删除jsPlumb连接答案

【问题标题】：How to delete jsPlumb connection如何删除jsPlumb连接
【发布时间】：2012-07-14 08:12:30
【问题描述】：

我正在玩jsplumb，但我无法删除只有一个 div 的 id 的两个 div 之间的连接。

【问题讨论】：

链接现在指向一个链接农场。

【解决方案1】：

我在文档 (http://jsplumb.org/doc/usage.html) 中找到了解决方案

jsPlumb.detachAllConnections("elementId");

【讨论】：

【解决方案2】：

更新： jsPlumb 不再实现 detach 方法。请参阅下面的Rafik Bari's answer 以获取更新的解决方案。

如果您有多个来自或到元素的连接，则分离所有连接可能不是删除连接的最佳解决方案。有一个（没有很好记录的）函数可以完全分离一个连接：

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

在我的示例中，我想在单击连接器时删除连接：

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

【讨论】：

此答案已过时，API 中不再存在 jsPlumb.detach()，请改用 jsPlumb.deleteConnection()（请参阅 Rafik Bari 的回复）

【解决方案3】：

此代码删除了我正在开发的游戏中的所有“错误”连接。希望对你有帮助

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

【讨论】：

【解决方案4】：

您好，可以参考： Detach connection jsPlumb

如果单击连接，此代码块允许分离连接：

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

【讨论】：

【解决方案5】：

如果源 div 或目标 div id 已知，则可以像这样删除连接：

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

您也可以使用jsPlumb.getAllConnections() 来获取所有连接的数组，并测试每个连接的sourceId 或targetId 以准确获取您需要的连接；

【讨论】：

【解决方案6】：

在删除所有端点连接后，到元素和从元素删除后，您需要将其分离，如第 3 行所示

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

【讨论】：

为我工作。但是我使用了一个 jsPlumb 的实例，而不是直接调用它：g_instance = jsPlumb.getInstance(...., Container: "flowchart-demo") 然后：g_instance.detachAllConnections(divID);
分离连接会使所有端点保持原位，而不会通过考虑其相对性来迷失图形的其余部分。因此，只要执行它，获取实例的方式就不会真正影响其余代码。

【解决方案7】：

jsPlumb.deleteConnectionsForElement(elementId)

有效。虽然它很旧，但我想补充一点，找出一个库有哪些方法，只要它足够自描述就很容易了。

dev tools

【讨论】：

【解决方案8】：

要删除连接，请使用以下代码：

jsPlumb.deleteConnection(con)

由于某种原因，分离对我不起作用。他们的文档中没有提到上述方法，可能他们忘记更正他们的文档。

【讨论】：

希望这对某人有所帮助 - 如果您删除两个元素之间的连接，然后删除这两个元素，然后创建两个具有相同 ID 的新元素并尝试连接它们，jsplumb 会感到困惑由于它保留了内部缓存。您必须在您的 jsPlumb 实例上调用 .reset()。

【解决方案9】：

我想更新答案。对于 2.5 版本，如果您使用

jsPlumb.detach()

您可能会收到错误消息：jsPlumb.detach() 不是函数。我也试试

jsPlumb.deleteConnection(conn)

连接确实被删除了，但是，我不确定为什么端点只是从 div 中分离出来。最后解决了

instance.deleteConnection(conn)

【讨论】：

【解决方案10】：

首先，您可以使用 sourceId 和 targetId 找到您的连接

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

这将返回一个 jsPlumb 连接数组，因此您可以删除与此源和目标 id 相关的所有连接。

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

【讨论】：

【解决方案11】：

删除对我有用的连接

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

【讨论】：