How to remove a jquery UI element without removing elements?

Say I have some html that looks like thsi:

<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>

If I then type

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

In console, it transforms it into a sortable. (jquery required) Now, If I want to reset it back to the original html, How can I do that? If I type:

$("#sortable").remove()

It removes all the html.

Is there a method that removes whatever .sortable() creates?

Answer

Use the destroy method.

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

From the documentation:

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