jsPlumb 点击删除线

要实现点击删除 jsPlumb 连线，可以通过以下步骤进行：

1. 给每条连线添加一个删除按钮，可以使用 CSS 样式和 HTML 元素实现。

2. 在点击删除按钮时，获取该连线的 ID。

3. 调用 jsPlumb 实例的 `detach` 方法，传入该连线的 ID，即可删除该连线。

以下是一个示例代码：

<div id="container">
  <div class="item" id="item1">Item 1</div>
  <div class="item" id="item2">Item 2</div>
  <div class="delete-line" data-id="line1">Delete Line 1</div>
  <div class="delete-line" data-id="line2">Delete Line 2</div>
</div>

<script>
  // 初始化 jsPlumb 实例
  const instance = jsPlumb.getInstance();

  // 连接两个元素
  instance.connect({
    source: 'item1',
    target: 'item2',
    anchors: ['Right', 'Left'],
    endpoint: ['Dot', { radius: 5 }]
  });

  // 给删除按钮绑定点击事件
  const deleteButtons = document.querySelectorAll('.delete-line');
  deleteButtons.forEach(btn => {
    btn.addEventListener('click', () => {
      const lineId = btn.dataset.id;
      instance.detach(lineId); // 删除连线
    });
  });
</script>

在上面的示例中，我们给每条连线的删除按钮添加了一个 `data-id` 属性，用来保存该连线的 ID。然后在点击删除按钮时，获取该属性值，并调用 `instance.detach` 方法删除该连线。