How do clear the search value after deleting the associated filter and to avoid the clearing of all filters after clearing the search value? - kendo-ui

Question

How do clear the search value after deleting the associated filter?
For example. I added filter: {gender: 'female'}. After this type in the search Mar.
After this clear filter in column name.
I want to clear the search value. For this, I listen to the event of the filter. And if the value of the filter is equal to the search value then clear this.
Maybe exists a more better approach.
How to avoid clear all filters after the clearing search value?
const dataSource = kendo.data.DataSource.create({
data: [{
name: 'Harry',
gender: 'male'
},
{
name: 'Marry',
gender: 'female'
},
{
name: 'Lora',
gender: 'female'
}
]
});
const gridConfig = {
toolbar: [
'search'
],
search: {
fields: ['name']
},
filterable: true,
dataSource: dataSource,
columns: [{
field: 'name'
}, {
field: 'gender'
}]
};
$('#grid').kendoGrid(gridConfig);
$('#grid').data('kendoGrid').bind('filter', onFilter);
const searchElement = $('#grid input.k-input');
function onFilter(e) {
const searchValue = searchElement.val();
if (e.filter) {
const isExistsFilter = e.filter.filters.some(filter => {
return gridConfig.search.fields.some(field => {
return filter.field === field && filter.value === searchValue;
});
});
if (!isExistsFilter && searchValue) {
searchElement.val('');
}
} else {
searchElement.val('');
}
}
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1021/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1021/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1021/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1021/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.3.1021/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.3.1021/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.3.1021/js/kendo.all.min.js"></script>
<div id="grid"></div>