How to delete endpoints and connections

[darshan theerth]

My app uses drag and drop concept. Then dragged blocks element could be connected using jsplumb. 

Now the user has the option to delete the block and endpoints by clicking 'X' button. But the problem is when I click the 'X' button, only block is getting deleted and endpoints are left behind. 

Here's my code:

var eventArray = [];

$("#canvasDivId").droppable({

    accept: ".rule, .event",

    activeClass: "ui-state-default",

    hoverClass: "ui-state-hover",

    drop: function(event, ui) {

        var clone = ui.helper.clone();

        clone.draggable({containment: 'parent'});

        $("#canvasDivId").append(clone);

        

        

        jsPlumb.Defaults.Container = $("#canvasDivId");

        jsPlumb.setContainer($('#canvasDivId'));

jsPlumb.draggable(clone, {

                  //containment: 'parent'

              });

var two = { 

            isSource:true, 

            isTarget:true,

            endpoint: [ "Rectangle", {width:15,height:15}, {outlineStroke:"black"}, {outlineWidth:10} ],

paintStyle:{ fill:"grey", outlineStroke:"black", outlineWidth:10 },

cssClass: "end",

<!-- endpointStyle:{ fill:"#DAD8D8",  outlineWidth:2, borderradius:5 }, -->

            

            maxConnections:-1,

    connector: [ "Flowchart", { stub: [40, 60], gap: 5, cornerRadius: 5, alwaysRespectStubs: true } ],

            connectorStyle: { strokeWidth:2, stroke:'#61B7CF' },

            dropOptions:{ 

                  drop:function(e, ui) { 

                    alert('drop!'); 

                  } 

              }  

        };

$('#canvasDivId .close').on('click', function () {

       $(this).parent('div').remove();

       jsPlumb.deleteEndpoint($(this).parent('div').sibling);

});

[Simon Porritt]

because you are using "  jsPlumb.deleteEndpoint($(this).parent('div').sibling);"  i guess. have you tried `jsPlumb.remove(the element)` ?