z0u/test_ep_remove.html

## test_ep_remove.html
<!doctype html>
<html>
<head>
  <script src="lib/jquery/jquery.js"></script>
  <script src="lib/jquery/jquery-ui.js"></script>
  <script src="lib/jsplumb/jquery.jsPlumb.js"></script>

  <script>
  $(function() {
    jsPlumb.importDefaults({
        Container: $('body')
    });

    var in1 = $('#in1');
    var in2 = $('#in2');
    var output = $('#output');

    var e1 = jsPlumb.addEndpoint("in1", { maxConnections: 1, isSource: false, isTarget: true, anchor: [ 0, 0.4, 1, 0 ] }),
      e2 = jsPlumb.addEndpoint("in2", { maxConnections: 1, isSource: false, isTarget: true, anchor: [ 0, 0.4, 1, 0 ] }),
      e3 = jsPlumb.addEndpoint("output", { isSource: true, isTarget: false, anchor: [ 1, 0.4, -1, 0 ] });

    // If the container is not draggable, the error doesn't occur.
    jsPlumb.draggable($('#container'));
    // If the connection is made programmatically, the error doesn't occur.
    //jsPlumb.connect({source:e3, target:e1});

    $('#rembutton').click(function() {
      console.log('Removing list item');
      output.remove();
      jsPlumb.doWhileSuspended(function() {
        console.log('Removing endpoints from output');
        jsPlumb.remove(output);
        console.log('Recalculating offsets');
        jsPlumb.recalculateOffsets($('#container'));
      });
      console.log('Redrawing');
      jsPlumb.repaint($('#container'));
    });

  });
  </script>

  <style>
  #container {
    width: 20ex;
    border: 1px solid gray;
    position: relative;
  }
  #container ul {
    list-style-type: none;
    padding: 0;
  }
  #container li {
    padding: 0 2ex;
  }
  #sources li {
    text-align: right;
  }
  #rembutton {
    width: 20ex;
    border: 1px solid gray;
    margin-top: 1em;
  }
  #instructions {
    float: right;
  }
  </style>
</head>

<body>
<div id="instructions">
  Drag output to input 1 or 2. Then click "Remove output".
</div>

<div id="container">
  <ul id="targets">
    <li id="in1">input 1</li>
    <li id="in2">input 2</li>
  </ul>
  <ul id="sources">
    <li id="output">output</li>
  </ul>
</div>

<div id="rembutton">Remove output</div>
</body>
</html>
	<!doctype html>
	<html>
	<head>
	<script src="lib/jquery/jquery.js"></script>
	<script src="lib/jquery/jquery-ui.js"></script>
	<script src="lib/jsplumb/jquery.jsPlumb.js"></script>

	<script>
	$(function() {
	jsPlumb.importDefaults({
	Container: $('body')
	});

	var in1 = $('#in1');
	var in2 = $('#in2');
	var output = $('#output');

	var e1 = jsPlumb.addEndpoint("in1", { maxConnections: 1, isSource: false, isTarget: true, anchor: [ 0, 0.4, 1, 0 ] }),
	e2 = jsPlumb.addEndpoint("in2", { maxConnections: 1, isSource: false, isTarget: true, anchor: [ 0, 0.4, 1, 0 ] }),
	e3 = jsPlumb.addEndpoint("output", { isSource: true, isTarget: false, anchor: [ 1, 0.4, -1, 0 ] });

	// If the container is not draggable, the error doesn't occur.
	jsPlumb.draggable($('#container'));
	// If the connection is made programmatically, the error doesn't occur.
	//jsPlumb.connect({source:e3, target:e1});

	$('#rembutton').click(function() {
	console.log('Removing list item');
	output.remove();
	jsPlumb.doWhileSuspended(function() {
	console.log('Removing endpoints from output');
	jsPlumb.remove(output);
	console.log('Recalculating offsets');
	jsPlumb.recalculateOffsets($('#container'));
	});
	console.log('Redrawing');
	jsPlumb.repaint($('#container'));
	});

	});
	</script>

	<style>
	#container {
	width: 20ex;
	border: 1px solid gray;
	position: relative;
	}
	#container ul {
	list-style-type: none;
	padding: 0;
	}
	#container li {
	padding: 0 2ex;
	}
	#sources li {
	text-align: right;
	}
	#rembutton {
	width: 20ex;
	border: 1px solid gray;
	margin-top: 1em;
	}
	#instructions {
	float: right;
	}
	</style>
	</head>

	<body>
	<div id="instructions">
	Drag output to input 1 or 2. Then click "Remove output".
	</div>

	<div id="container">
	<ul id="targets">
	<li id="in1">input 1</li>
	<li id="in2">input 2</li>
	</ul>
	<ul id="sources">
	<li id="output">output</li>
	</ul>
	</div>

	<div id="rembutton">Remove output</div>
	</body>
	</html>