Deleting Connections when elements are deleted in jsPlumb
Removing the connections along with the parent element can be little tricky if not correctly handled. This requires the maintenance of information regarding a connections source and target.
In order to do so, we'll be using an array called 'list'. The list array is a two- dimensional array instantiated with the number of connections at the time of deletion of a parent element.
An event listener will be called when the user clicks on the cancel icon of an element, as shown below. (I've tried as far as possible to simplify each and every code line via comments)
The reason to declare the list array within the call to delete listener is the fact that there is no viable place other than this that could assure that the user has fully completed connecting as desired, plus there is little to no concern regarding this details up till an element needs to be deleted( up till what we've covered in this context, but the connection details are crucial when it comes to processing complex details as this develops)
Also, in the above code, I've used splice twice. One, within the fro loop and the other, after removing the element. This may seem redundant at first but I was forced to follow this accidentally as I kept on getting recurring undefined cells in my array. Well, let me explain this further.
In the first for loop, we are splicing each individual cell. Hence, this is going to leave the list with columns where a source may existing but the target maybe undefined or vise versa. This kind of columns are worthless. So we check for such columns in the second splicing and we splice the entire column so that only useful data( ones that hold both the source and he target as a column) exists in the list array.