0
1

0
0
0

Its very easy to add reusable class to clear your input field text

HTML

 
<div class="panel panel-default">  
    <div class="panel-body">
<h1>Bootstrap Clear Input field</h1>

<input class="form-control clearable" type="text" placeholder="Search" />  
    </div>
</div>  

CSS

 
.clearable{
  background: #fff url(http://bijudesigner.com/blog/wp-content/uploads/2015/06/download.gif) no-repeat right -10px center;
  padding: 3px 18px 3px 4px; /* Use the same right padding (18) in jQ! */
  transition: background 0.4s;
}
.clearable.x  { background-position: right 5px center; }
.clearable.onX{ cursor: pointer; }

Javascript

 
jQuery(function($) {
 
  // /////
  // CLEARABLE INPUT
  function tog(v){return v?'addClass':'removeClass';} 
  $(document).on('input', '.clearable', function(){
    $(this)[tog(this.value)]('x');
  }).on('mousemove', '.x', function( e ){
    $(this)[tog(this.offsetWidth-18 < e.clientX-this.getBoundingClientRect().left)]('onX');   
  }).on('click', '.onX', function(){
    $(this).removeClass('x onX').val('').change();
  });
  //www.bijudesigner.com
  
});

Demo :