如何在不删除元素的情况下删除 jquery UI 元素?

How to remove a jquery UI element without removing elements?

假设我有一些 html 看起来像这样:

<ul id="sortable">
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>

如果我再输入

$("#sortable").sortable();

在控制台中,它将其转换为可排序的。 (需要 jquery) 现在,如果我想将它重置回原来的 html,我该怎么做?如果我输入:

$("#sortable").remove()

它删除了所有 html。

有没有一种方法可以删除 .sortable() 创建的任何内容?

使用destroy方法。

$("#sortable").sortable("destroy");

来自文档:

Removes the sortable functionality completely. This will return the element back to its pre-init state.