Destroy jScrollPane

Question

How to remove jScrollPane using destroy. Please can you give a simple example for the following code:

$(document).ready(function() {
    $(".div1").jScrollPane();
});

<div class="div1">Some text...</div>

Answer 1

To destroy an instance of jscrollpane (v2):

var element = $('.div1').jScrollPane({});
var api = element.data('jsp');
api.destroy();

Answer 2

The old jScrollPaneRemove() function looked something like this:

$.fn.jScrollPaneRemove = function() {
  $(this).each(function() {
    $this = $(this);
    var $c = $this.parent();
    if ($c.is('.jScrollPaneContainer')) {
        $this.css(
            {
                'top':'',
                'height':'',
                'width':'',
                'padding':'',
                'overflow':'',
                'position':''
            }
        );
        $this.attr('style', $this.data('originalStyleTag'));
        $c.after($this).remove();
    }
  });
}

As you can see this removes the css, or rather sets it to nothing, and resets the style tag to the original styles. The problem is that originalStyleTag is also removed, but it used to look something like this:

$this.data('originalStyleTag', $this.attr('style'));

So it's basicly a way to store the old styles before jScrollPane is activated and reapplying them when jScrollPane is removed.

A lot has changed in the new version, and I don't know if this method still works, but it looks like the way to do it is to store the old styles before running jScrollPane, zero out any css set by jScrollPane, and set the css bak to the old styles to make it like it was before jScrollPane.

Sounds like a lot to do, and I would seriously consider trying jQuery's remove, empty, detach or anything else on the different containers assocciated with jScrollPane, and if all else fails try to make the above function work in your script. All you really need to do is get the old styles in a data array before running jScrollpane, and then see if the old remove function still works.