Remove function issues

[Jevedor]

I am finding the remove functionality does not work properly.

As per the documentation this should remove the markup:

$(".container").customScrollbar("remove");

The issue is, it does not properly remove the added "overview" and "viewport" elements. Looking in the code the issue is the use of unwrap.

removeScrollbarComponents: function () { this.removeScrollbar("vertical"); this.removeScrollbar("horizontal"); if (this.overviewAdded) this.$element.unwrap(); if (this.viewPortAdded) this.$element.unwrap(); },

unwrap removes what is wrapping the element not what the element is wrapping. Thus this function ends up removing elements above the container instead of removing viewport and overview elements.

[Jevedor]

A bit more info.
The culprit to this issue is that in the function that adds the viewport and overview elements the code uses the wrapInner method.

addScrollBarComponents: function () { this.assignViewPort(); if (this.$viewPort.length == 0) { this.$element.wrapInner("<div class=\"viewport\" />"); this.assignViewPort(); this.viewPortAdded = true; } this.assignOverview(); if (this.$overview.length == 0) { this.$viewPort.wrapInner("<div class=\"overview\" />"); this.assignOverview(); this.overviewAdded = true; } this.addScrollBar("vertical", "prepend"); this.addScrollBar("horizontal", "append"); },

The unwrap function would work if we used wrap instead of wrapInner. Although I like the idea of it putting the elements inside instead of outside.

here is a possible way to resolve the issue.

removeScrollbarComponents: function () { this.removeScrollbar("vertical"); this.removeScrollbar("horizontal"); if (this.overviewAdded) this.$overview.replaceWith(this.$overview.contents()); if (this.viewPortAdded) this.$viewPort.replaceWith(this.$viewPort.contents()); },

[karanveerm]

I was having the same problem, Jevedor's suggestion worked for me.

[hunhavoc]

Thanks, Jevedor's solution solved my problem!

[gcirone]

Yes Jevedor's solution working good +1