Removing edges

There are a few ways to remove edges in JsPlumb. On this page we'll discuss edge deletion in the UI, but it's also possible (and quite common) to remove an edge programmatically, for which we direct you to our model docs.

Removing via drag/drop

By default, JsPlumb will let you grab an edge by one of its endpoints, drag the edge, and then drop it in whitespace, and the edge will be removed - try it here:

In this example we used the Dot endpoint type, but this also works with the Blank endpoint (move your mouse to either end of the edge and you'll see the blank endpoint reveal itself):

Rettaching

JsPlumb's default behaviour is to discard any edges that a user has dropped in whitespace. You can override this via a default:

Vanilla JS

React

Angular

Vue

Svelte

import { newInstance } from "@jsplumbtoolkit/browser-ui"

const toolkit = newInstance()
    
const surface = toolkit.render(someElement, {
  "defaults": {
    "reattachConnections": true
  }
});

In this canvas if you drag one end of the edge and drop it in whitespace JsPlumb will reattach it:

Disabling detach

You can disable detach via mouse/touch events with the connectionsDetachable default:

Vanilla JS

React

Angular

Vue

Svelte

import { newInstance } from "@jsplumbtoolkit/browser-ui"

const toolkit = newInstance()
    
const surface = toolkit.render(someElement, {
  "defaults": {
    "connectionsDetachable": false
  }
});

In this canvas JsPlumb will not allow you to detach the edge using the mouse/touch events:

How, then, could your users delete an edge via the UI? One solution, introduced in 7.1.0, is to specify a deleteButton.

Showing a delete button

Vanilla JS

React

Angular

Vue

Svelte

import { newInstance } from "@jsplumbtoolkit/browser-ui"

const toolkit = newInstance()
    
const surface = toolkit.render(someElement, {
  "defaults": {
    "connectionsDetachable": false
  },
  "view": {
    "edges": {
      "default": {
        "deleteButton": true
      }
    }
  }
});

The delete button will be assigned a CSS class of .jtk-edge-delete.

Custom CSS class

You can provide one or more extra classes to set on the delete button via the deleteButtonClass property:

Vanilla JS

React

Angular

Vue

Svelte

import { newInstance } from "@jsplumbtoolkit/browser-ui"

const toolkit = newInstance()
    
const surface = toolkit.render(someElement, {
  "defaults": {
    "connectionsDetachable": false
  },
  "view": {
    "edges": {
      "default": {
        "deleteButton": true,
        "deleteButtonClass": "foo bar etc"
      }
    }
  }
});

Showing on hover only

deleteButton can be specified either as a boolean, or as a constant that specifies its visibility. To have a delete button that only appears on hover, for example:

Vanilla JS

React

Angular

Vue

Svelte

import { newInstance,
	OVERLAY_VISIBILITY_HOVER } from "@jsplumbtoolkit/browser-ui"

const toolkit = newInstance()
    
const surface = toolkit.render(someElement, {
  "defaults": {
    "connectionsDetachable": false
  },
  "view": {
    "edges": {
      "default": {
        "deleteButton": OVERLAY_VISIBILITY_HOVER
      }
    }
  }
});

Managing edge removal

You may want to manage the removal of some specific edge - perhaps some condition is met in your app that means the edge cannot be removed, or perhaps you want to hit the server to confirm edge deletion first, etc. For that you can use the deleteConfirm property:

Vanilla JS

React

Angular

Vue

Svelte

import { newInstance } from "@jsplumbtoolkit/browser-ui"

const toolkit = newInstance()
    
const surface = toolkit.render(someElement, {
  "defaults": {
    "connectionsDetachable": false
  },
  "view": {
    "edges": {
      "default": {
        "deleteButton": true,
        "deleteConfirm": (p, proceed) =>  {
        if(confirm('Delete edge?')) {
            proceed() 
        }     
      }
      }
    }
  }
});

The argument for deleteConfirm should be a function of this type:

export type EdgeDeleteConfirmationFunction =  (params: { e: MouseEvent, edge: Edge }, proceed: (() => any)) => any

When you wish to confirm the edge removal, you must invoke the proceed method.

Detaching with multiple connections

If you have multiple connections attached to some endpoint and you want your users to be able to detach them using the mouse or touch events, you can supply a connectionDetachSelector function in your render options:

Vanilla JS

React

Angular

Vue

Svelte

import { newInstance,
	Endpoint } from "@jsplumbtoolkit/browser-ui"

const toolkit = newInstance()
    
const surface = toolkit.render(someElement, {
  "connectionDetachSelector": (ep:Endpoint) => {
    // 'connections' is an array of 'Connection' objects, which have an 'edge' member
    return ep.connections.find(c => c.edge.data.label === 'Detachable')
 }
});

In this canvas there are 3 edges connected to node 1's endpoint, and we have provided a connectionDetachSelector as shown in the code snippet above - it will only allow edges with a "Detachable" label to be selected for detach. Try detaching edges from node 1's endpoint - once you have detached both of the edges with a "Detachable" label you will not be able to detach the edge with the "Not Detachable" label:

Your connectionDetachSelector can return null, meaning no connection will be selected - which is what happens in our example here, when the interceptor cannot find an edge with a "Detachable" label.