Removing Nodes

If you have configured a DOM element with jsPlumb in any way you should use jsPlumb to remove the element from the DOM (as opposed to using something like jQuery's remove function, for example).

To help you with this, jsPlumb offers two methods:

jsPlumb.remove

This removes an element from the DOM and all Connections and Endpoints associate with that element:

var conn = jsPlumb.connect({source:"element1", target:"element2"});
...
jsPlumb.remove("element1");

conn is now detached and element1 is gone from the DOM.

You can also pass a selector or DOM element to the remove method.

jsPlumb.empty

This removes all the child elements from some element, and all of the Connections and Endpoints associated with those child elements. Perhaps you have this markup:

<ul id="list">
  <li id="one">One</li>
</ul>

var conn = jsPlumb.connect({source:"one", target:"someOtherElement"});
...
jsPlumb.empty("list");

conn is now detached and the UL is empty.

You can also pass a selector or DOM element to the empty method.

Removing Connections/Endpoints

There are a number of different functions you can use to remove Connections and/or Endpoints.

Connections

Detaching a single connection

To remove a single Connection, use jsPlumb.detach:

var conn = jsPlumb.connect({ some params});
...
jsPlumb.detach(conn);

When you call jsPlumb.detach to remove a Connection, the Endpoints associated with that Connection may or may not also be deleted - it depends on the way the Connection was established. The Endpoints will be deleted under the following circumstances:

you created the Connection using jsPlumb.connect and you did not set deleteEndpointsOnDetach:false.
the Connection was created via the mouse by a user on an element configured via makeSource which did not have deleteEndpointsOnDetach:false set.

The Endpoints will not be deleted under the following circumstances:

you created the Connection using jsPlumb.connect and you set deleteEndpointsOnDetach:false
the Connection was created via the mouse by a user from an Endpoint registered with addEndpoint.
the Connection was created via the mouse by a user on an element configured via makeSource which had deleteEndpointsOnDetach:false set.

Detaching all Connections from a single element

To detach all the Connections from some given element:

jsPlumb.detachAllConnections(el, [params])

el may be:

a String representing an element id
a DOM element
a selector representing a single element

params is optional and may contain:

fireEvent - whether or not to fire a disconnection event. The default is true.

Detaching all Connections from every element

To detach every Connection in jsPlumb:

jsPlumb.detachEveryConnection();

This leaves all Endpoints in place according to the deletion rules outlined in the description of jsPlumb.detach above.

Endpoints

Deleting a single Endpoint

To delete a single Endpoint:

var ep = jsPlumb.addEndpoint(someElement, { ... });
...
jsPlumb.deleteEndpoint(ep);

ep may be either:

a String, representing an Endpoint's UUID (when you add an Endpoint you can provide a uuid member for that Endpoint)
an actual Endpoint object (as in the example above)

Deleting every Endpoint

To delete every Endpoint in jsPlumb:

jsPlumb.deleteEveryEndpoint();

This has the effect of removing every Endpoint and also every Connection.

Note this method is quite similar to jsPlumb.reset, except that this method does not remove any event handlers that have been registered.

Contents