Question

I’m working on a jsPlumb problem. When I try to programatically remove all of an elements connections, I get Uncaught TypeError: Cannot read property ‘left’ of undefined

I have several “nodes” (html elements) that each have 1 input endpoint (an end point that accepts) and n output endpoints. Each node also has a javascript object behind it. I have a “selected” state in my software. Users can select multiple nodes and the objects are pushed to an array called selected. I have a key listener for the delete key. When the key is pressed it loops through selected nodes, deleting them and removing their endpoints. This works great when there are no connections, but when there are connections I the error.

The output endpoints are attached to child HTML elements of the main node…

There’s a lot of code doing lots of stuff, but I’ll try to share the relevant parts:

 function Node(jsonFromServer){
      /* … this is the constructor method… some code omitted*/
     this.endpoints = [];
     this.endpoints.push(jsPlumb.addEndpoint(this.el.attr("id"),targetEndpoint,{anchor:"TopCenter",uuid: this.el.attr("id") + "TopCenter"}));
     this.addConnectionEndpoints();
 }

Node.prototype.addConnectionEndPoints = function(){
    //omitting code… loops through 'connections' that don't have 'has endpoint' marked….
    this.endpoints.push(jsPlumb.addEndpoint(connection['el'].attr("id"),sourceEndpoint,{anchor:"RightMiddle",uuid:connection['el'].attr("id")+"RightMiddle"}));
    connection.hasEndPoint = true;
}

So that was the setup. Here’s how I delete

when key pressed
    If key is delete /* all this stuff works */
        loop through selected array (the array of selected Node elements:works)
            node.el.hide(250).remove();
            loop through node's endpoints array
                 //endpoint is the correct object... proved with console.log
                 //the following line is the error
                 jsPlumb.deleteEndpoint(endpoint); 
            ajax call to server to delete stuff on the backend

Answer 1

Fixed it! When I said node.el.hide(250).remove(); I removed an html element that was required in the delete process. I moved the remove part to the callback of the ajax request, and it works like a charm.