title: Deleting all Connections along with the Element in jsPlumb
body: <p>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</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  
      &lt;script src="../lib/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
      &lt;script src="../lib/jquery-ui.min.js"&gt;&lt;/script&gt;
      &lt;script src="../lib/jquery.jsPlumb-1.4.1-all-min.js"&gt;&lt;/script&gt;
      &lt;script src="../lib/jquery.jsPlumb-1.6.4-min.js"&gt;&lt;/script&gt;
  
      &lt;style&gt;
  
          @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;
          }
  
      &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div class="project" id="cId"&gt;
  &lt;/div&gt;
  &lt;div id="container"&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  
      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 = $('&lt;div&gt;').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 = $('&lt;div&gt;').attr('id', 'state' + i).addClass('task').text('Section ' + (i-1));
              var title = $('&lt;div&gt;').addClass('title');
              var stateName = $('&lt;input&gt;').attr('type', 'text');
              title.append(stateName);
              var connect = $('&lt;div&gt;').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();
          });
  
  
      });
  
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>