I am using SyncFusion date picker as follows: SyncFusion DatePicker

<div style="margin: 50px;">
   <input id="element"/>
</div>

With jQuery, I initiate the date object as follows that again appends to the HTML element:

var datepicker = new ej.calendars.DatePicker({ width: "255px", color: "red", format: "MM/dd/yyyy" }); 
datepicker.appendTo('#element');

It works but I've a requirement to initiate the object once and clear it on condition. So I was trying it as follows:

datepicker.html();  
datepicker.empty();

Even tried this:

$('#element').empty();

The above doesn't clear the element, instead it creates repeated object of the date picker. Any way I can clear the date picker object and rebind it to the HTML element?

Current View: This is what happens when I try to rebind the date picker object with HTML element.