Remove/disable jquery plugin on button click

Question

I am using jQuery ImageAreaSelect for image area selection like this:

 $('#image').imgAreaSelect({}); //#image is a img id

Below this image, I have a bunch of image thumbnails, clicking on which will populate that image as #image . This way user can load each image and then select its area.

My problem is that when a new image is loaded, the dotted line which indicates the area selected for previous image still remains and gets shown on the newly loaded image. I do not want this and want this to go away every time a new image is loaded.

I read and tried this answer and this answer but they are not working for me... My current (non-working) code is:

$('#load').click(function() {
    $('#image').imgAreaSelect({hide:true,remove:true}); //try to remove old instance
    $('#image').imgAreaSelect({}); //create new instance...
});

Any help is appreciated.

Answer 1

I have never used such pluggin but the documentation explains how to disable/re-enable it.

Save the variable when you initialize the pluggin

var ias = $('#image').imgAreaSelect( // your original initalization

Then call disable on it as the documentation states:

ias.setOptions({hide:true,remove:true})

Answer 2

Try this way

$('#load').click(function() {
    $('#image').cancelSelection();
});