Search code examples
javascripthtmljsplumb

Removing all jsPlumb endpoints from a div


I am trying to remove all jsPlumb endpoints from a div with a source endpoint at right and a target at the left.

enter image description here

Here is the code that adds the endpoints to the div:

addEndpointsToDiv("exp1", ["Right"], ["Left"])

function addEndpointsToDiv(divId, sourceAnchors, targetAnchors) {
for (var i = 0; i < sourceAnchors.length; i++) 
{
 var sourceUUID = divId + sourceAnchors[i];
 instance.addEndpoint(divId, sourceEndpoint, 
  {
    anchor: sourceAnchors[i], uuid: sourceUUID
  });
}
for (var j = 0; j < targetAnchors.length; j++) 
 {
 var targetUUID = divId + targetAnchors[j];
 instance.addEndpoint(divId, targetEndpoint, { anchor: targetAnchors[j], uuid: targetUUID });
 }
};

Question: How do I remove all of these end points from only one div?

Here are a few of my failed attempts:

Attempt #1:

instance.deleteEndpoint(divId)

Attempt #2

var endpoint = instance.getEndpoint(divId)
while (endpoint != null)
{
  instance.deleteEndpoint(divId)
  endpoint = instance.getEndpoint(divId)
}

Attempt #3

var endPoints = instance.selectEndpoints(divId)
endPoints.each(function (endpoint) {
instance.deleteEndpoint(endPoint)
});

Attempt #4

var endpoints = instance.getendpoints(divid)
for (endpoint in endpoints)
   instance.deleteendpoint(endpoint.endpoint)

Solution

  • I found the answer on this post: https://groups.google.com/forum/#!topic/jsplumb/Hsf6oKQiBt4

    I only needed this one line of code:

    instance.removeAllEndpoints(divId)