javascript - How to destroy bootstrap colorpicker? -

i using bootstrap colorpicker in logic given below : -

    (var = 0; < abc.length; i++) {      if (selectedvalue == abc[i].name) {                         var color = getcolor(selectedvalue);                         $('.colorpicker').colorpicker('setvalue', color).on(                             'changecolor', function(ev) {                                 var colorcode = ev.color.tohex();                                 changecolor(colorcode);                             }).on('hidepicker', function(ev) {                         alert("hiding colorpicker");                     });                 }    } 

the above code gets called method everytime user select value in dropdown.

problem : when open colorpicker , close defocusing it. alert "hiding colorpicker" once in first go. if select value dropdown fires above given code again , open , close color picker again. alert twice , on in increasing numbers.

my understanding: understanding initializing color picker different values everytime above code fired ,so code creating different instances of colorpicker on same ".colorpicker" class element. need remove created instance of colorpicker before initializing new one.

what tried: used below given line first line in method destroy first. it's not working.

$('.colorpicker').colorpicker('destroy'); 

any how can destroy colorpicker everytime , use new instance on every method call can avoid multiple alerts of "hiding colorpicker".