How to clear existing date value from a table cell with datepicker?

Question

I am working on a Python Flask application where in one of the HTML pages, I am dynamically appending a table that has multiple date fields with datepickers. When the page is loaded, the record is retrieved from the database. All the date fields can be edited and set to a different date using the datepicker.

However, there is currently no way to clear an existing value from the date field. As soon as I click the cell, I get the datepicker popup and the backspacing is not working on the cell. I tried adding a delete button to the same <td> alongside the date, but when I click the button, the calendar is popping up because it is in the same cell. How do I enable clearing of existing date value and write back to the database? What is the standard practice for this?

Here is how the for the date is constructed:

'<td align ="left" data-name="tenure_date" class="editable-date tenure_date" data-type="date" id="tenure_date" pk=' + row[11] + '>' + initialTenureDate + ' </td>'

Here is the script for the datepicker and subsequent database update, both of which are working as expected:

function setupeditfields() {
    $('.editable-date').editable({
        ajaxOptions: {
            type: 'post',
            dataType: 'json'
        },
        datepicker: {
            todayBtn: 'linked',
            todayHighlight: true,
            autoclose: true,
            format: 'yyyy/mm/dd',
            viewformat: 'yyyy/mm/dd',
        },
        success: function (response, newValue) {
            //adjust the date with timezone offset so it does not show the previous date
            var newDate = new Date(newValue);
            newDate.setMinutes( newDate.getMinutes() + newDate.getTimezoneOffset() );
            var parsedDate = moment(newDate, 'YYYY/MM/DD');
            if (parsedDate.isValid()) {
                var formattedDate = parsedDate.format('YYYY/MM/DD');
                var fieldName = $(this).attr('data-name'); // Get the field name
                var pk = $(this).attr('pk'); // Get the primary key
                handleEdit(fieldName, formattedDate, pk, 'date'); // Call handleEdit function
            } else {
                console.error('Invalid date:', newValue);
            }
        },
        error: function (response, newValue) {
            console.error(response.responseText);
        }
    });
}

// Function to handle edit and send AJAX request
function handleEdit(fieldName, editedData, pk, field_type) {
    // Make AJAX call to update database
    console.log('handle edit');
    $.ajax({
        url: '/updatefacultydata', // URL of your Flask route for updating the database
        method: 'POST',
        data: {
            field: fieldName,
            value: editedData,
            pk: pk,
            field_type: field_type
        },
        success: function (response) {
            // Handle success response from server if needed
            console.log("Database updated successfully");
            fetchMultiTabData();
        },
        error: function (xhr, status, error) {
            // Handle error response from server if needed
            console.error("Error updating database:", error);
        }
    });
}