Deleting all Connections along with the Element in jsPlumb

When I try to delete a dropped element in jsPlumb, the connections don't get deleted. Instead they simply exist in the same position. I would like to delete all connections when the source or the target of that connection is deleted upon double click. The code's given below
<!doctype html>
<html>
<head>

    <script src="../lib/jquery.min.js"></script>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="../lib/jquery-ui.min.js"></script>
    <script src="../lib/jquery.jsPlumb-1.4.1-all-min.js"></script>
    <script src="../lib/jquery.jsPlumb-1.6.4-min.js"></script>

    <style>

        @import url(http://fonts.googleapis.com/css?family=Montserrat);

        * {
            font-family: 'Montserrat', sans-serif;
        }
        #container {
            position: relative;
            resize: both;
            margin-left: 180px;
            border: 1px solid #aaaaaa;
            width: 800px;
            height: 650px;
            overflow-x: scroll;
            overflow-y: scroll;
        }
        .title {
            padding: 10px;
            cursor: move;
        }
        .connect {
            font-size:10px;
            text-align: center;
            width: 100%;
            height: 20px;
            background-color: #ffffff;
            cursor: pointer;
        }
        .project {
            border: 1px solid gray;
            text-align: center;
            width: 170px;
            height: 75px;
            background-color: lightpink;
            position: absolute;
        }
        .pro {
            border: 1px solid gray;
            text-align: center;
            width: 170px;
            height: 75px;
            background-color:  lightpink;
            position: absolute;
        }
        .task {
            font-size: 12px;
            text-align: center;
            font-weight: 200;
            border: 1px solid black;
            background-color: #ddddff;
        }

    </style>

</head>

<body>

<div class="project" id="cId">
</div>
<div id="container">
</div>

<script>

    jsPlumb.ready(function() {

        jsPlumb.Defaults.Container=$("#container");
        jsPlumb.Defaults.PaintStyle = { strokeStyle:"palevioletred", lineWidth:2, dashstyle: '3 3', };
        jsPlumb.Defaults.EndpointStyle = { radius:7, fillStyle:"palevioletred" };
        jsPlumb.importDefaults({Connector : [ "Bezier", { curviness:50 } ]});
        jsPlumb.setContainer($('#container'));
        var i = 1;
        $(".project").draggable
        ({
            helper : 'clone',
            cursor : 'pointer',
            tolerance : 'fit',
            revert : true

        });

        var saveState = function(state) {
            $.post('http://www.example.com/saveState', {
                id: $(state).attr('id'),
                top: $(state).position().top,
                left: $(state).position().left
            });
        }

        $("#container").droppable
        ({
            accept: '.project',
            containment: 'container',

            drop: function (e, ui) {
                droppedElement = ui.helper.clone();
                ui.helper.remove();
                $(droppedElement).removeAttr("class");
                jsPlumb.repaint(ui.helper);

                var newAgent = $('<div>').attr('id', 'pro' + i).addClass('pro');
                newAgent.text('Element ' + i);
                $(droppedElement).draggable({containment: "container"});
                $('#container').append(newAgent);

                jsPlumb.draggable(newAgent, {
                    containment: 'parent'
                });
                newAgent.dblclick(function(e) {

                    jsPlumb.detachAllConnections($(this));
                    jsPlumb.removeAllEndpoints($(this));
                    jsPlumb.detach($(this)); 
                    $(this).remove()
                });
                i++;
            }
        });

        $("#container").on('click', '.pro', function (e) {
            i++;
            var newState = $('<div>').attr('id', 'state' + i).addClass('task').text('Section ' + (i-1));
            var title = $('<div>').addClass('title');
            var stateName = $('<input>').attr('type', 'text');
            title.append(stateName);
            var connect = $('<div>').addClass('connect').text('Click here to drag');

            newState.css({
                'top': e.pageY,
                'left': e.pageX
            });

            newState.append(title);
            newState.append(connect);

            $(this).append(newState);

            jsPlumb.makeTarget(newState, {
                anchor: 'Continuous'
            });

            jsPlumb.makeSource(connect, {
                anchor: 'Continuous'

            });

            newState.dblclick(function(e) {
                jsPlumb.detachAllConnections($(this));
                $(this).remove();
                e.stopPropagation();
            });

            stateName.keyup(function(e) {
                if (e.keyCode === 13) {
                    $(this).parent().text(this.value);
                }
            });
            stateName.focus();
        });


    });


</script>

</body>

</html>
Solution
Got this to work and I would like to share it for future references for anyone. I've uploaded my solution to github where the work.html file relates to this question.