destroying fgelinas jquery-ui-timepicker

Question

I am using this time picker.

Problem is, when I navigate to another page while the time picker is shown, it will still be shown on the next screen when it loads. How do I destroy the timepicker?

Have tried the below but to no avail.

tp.timepicker('destroy');
tp.timepicker('remove');
tp = null;

Answer 1

Here is the working JSFIDDLE HTML:

<input type="text" style="width: 70px;" id="timepicker" value="" />
<input type="button" value="Destroy it !" id="destroy">

JS:

$(document).ready(function(){
    $('#timepicker').timepicker();
    $('#destroy').click(function(){
       $('#timepicker').timepicker('destroy'); 
       $('#timepicker').timepicker('hide');
    });
});