How to hide delete button in textbox that shows up when you type anything in jQuery mobile

Question

I want to remove delete button in textbox that shows up when you type anything in jQuery mobile. When I click reset button textbox is clear but delete button is not hidden.

Here is jsfiddle.

html

<div id="dvSearch" data-role="fieldcontain" class="ui-hide-label" data-theme="a">
    <div class="clsNote">Entrer le nom du membre que vous desirez contacter</div>
    <label id="lblSearch" for="txtsearch">Search</label>
    <input type="search" id="txtsearch" data-i18n="[placeholder]attr.placeholderSearch;" data-theme="b" />
</div>
<a href="javascript:void(0);" id="btnReset" class="LnkButton ui-icon-alt ui-btn ui-btn-up-a ui-shadow ui-btn-corner-all ui-btn-inline" data-theme="a" data-role="button" data-inline="true" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span">
                                        <span class="ui-btn-inner">
                                            <span class="ui-btn-text">Reset</span>
                                        </span>
 </a>

jQuery

 $('#btnReset').on('click', function (e) {
     // $(".ui-icon-delete").hide();//**this line doesnt work**
     $("#txtsearch").val('');
 });

Answer 1

This helped me after spending couple of hours i figure it out. I programatically clicked the button in jquery

jsfiddle

  $('#btnReset').on('click', function (e) {
     $(".ui-icon-delete").trigger('click');      
 });

for details http://demos.jquerymobile.com/1.0a2/experiments/api-viewer/docs/trigger/

Answer 2

$('#btnReset').on('click', function (e) {
     $(".ui-input-clear").hide();
     $("#txtsearch").val('');
 });

 $('#txtsearch').keyup(function(){
     var content = $('#txtsearch').val();
     if(content != '')
     {
         $(".ui-input-clear").show();
     }
     else
     {
         $(".ui-input-clear").hide();
     }
});
$(".ui-input-clear").click(function(){
    $(this).hide();
});

Use this Script.

Fiddle