removing-删除

Removing Nodes 删除节点

If you have configured a DOM element with jsPlumb in any way you should use jsPlumb to remove the element from the DOM (as opposed to using something like jQuery’s remove function, for example).

如果您通过jsPlumb方式已经配置了一个DOM元素,您应采用jsPlumb从DOM中删除该元素(而不是类似于jQuery中‘remove’等方法)

To help you with this, jsPlumb offers two methods:

为了帮助你达到删除节点的目的,jsPlumb提供了两种方法

jsPlumb.remove

This removes an element from the DOM and all Connections and Endpoints associate with that element:

该方法可从DOM中删除一个元素及其所有连接和端点关联的元素:

var conn = jsPlumb.connect({source:"element1", target:"element2"});
...
jsPlumb.remove("element1");

conn is now detached and element1 is gone from the DOM.
conn现在已被断开,element1元素已从DOM中删除

You can also pass a selector or DOM element to the remove method.

jsPlumb.empty

This removes all the child elements from some element, and all of the Connections and Endpoints associated with those child elements. Perhaps you have this markup:
该功能可以清空某个元素下所有的子元素及其子素的所有的连接和端点。也许你需要在此标记一下:

<ul id="list">
  <li id="one">One</li>
</ul>
var conn = jsPlumb.connect({source:"one", target:"someOtherElement"});
...
jsPlumb.empty("list");

conn is now detached and the UL is empty.
conn现在已断开并且UL已经清空。

You can also pass a selector or DOM element to the empty method.

Removing Connections/Endpoints 删除联线/端点

There are a number of different functions you can use to remove Connections and/or Endpoints.
在这里有许多不同的方法供你去删除联线和端点。

Connections

Detaching a single connection

To remove a single Connection, use jsPlumb.detach:
删除一个简单的联线,可以采用jsPlumb.detach:

var conn = jsPlumb.connect({ some params});
...
jsPlumb.detach(conn);

When you call jsPlumb.detach to remove a Connection, the Endpoints associated with that Connection may or may not also be deleted - it depends on the way the Connection was established. The Endpoints will be deleted under the following circumstances:
当你调用jsPlumb.detach 删除某一联线时,与之相关的端点可能被删除也可能不被删除,这取决于联线建立的方式。以下情况端点将被删除

  • you created the Connection using jsPlumb.connect and you did not set deleteEndpointsOnDetach:false.
    当你使用jsPlumb.connect创建联线时,没有设置deleteEndpointsOnDetach:false.
  • the Connection was created via the mouse by a user on an element configured via makeSource which did not have deleteEndpointsOnDetach:false set.
    当用户通过鼠标创建联线使用makeSource,相关元素没有deleteEndpointsOnDetach:false设置。

The Endpoints will not be deleted under the following circumstances:

  • you created the Connection using jsPlumb.connect and you set deleteEndpointsOnDetach:false
  • the Connection was created via the mouse by a user from an Endpoint registered with addEndpoint.
  • the Connection was created via the mouse by a user on an element configured via makeSource which had deleteEndpointsOnDetach:false set.
Detaching all Connections from a single element

To detach all the Connections from some given element:

jsPlumb.detachAllConnections(el, [params])

el may be:

  • a String representing an element id
  • a DOM element
  • a selector representing a single element

params is optional and may contain:

  • fireEvent - whether or not to fire a disconnection event. The default is true.
Detaching all Connections from every element

To detach every Connection in jsPlumb:

jsPlumb.detachEveryConnection();

This leaves all Endpoints in place according to the deletion rules outlined in the description of jsPlumb.detach above.

Endpoints

Deleting a single Endpoint

To delete a single Endpoint:

var ep = jsPlumb.addEndpoint(someElement, { ... });
...
jsPlumb.deleteEndpoint(ep);

ep may be either:

  • a String, representing an Endpoint’s UUID (when you add an Endpoint you can provide a uuid member for that Endpoint)
  • an actual Endpoint object (as in the example above)
Deleting every Endpoint

To delete every Endpoint in jsPlumb:

jsPlumb.deleteEveryEndpoint();

This has the effect of removing every Endpoint and also every Connection.

Note this method is quite similar to jsPlumb.reset, except that this method does not remove any event handlers that have been registered.

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值