Clear Button in Bootstrap Input Group Component

By default, Internet Explorer 10 and 11 show an ‘X’ button (clear button) at the edge of non-empty text input. In this post, we’ll add such button for input group component in Bootstrap 3. It will look something like the following screenshot:

HTML

We use Bootstrap feedback icon and add 2 our custom CSS classes (.has-clear and.form-control-clear) as highlighted below.

<div class="input-group">
  <div class="form-group has-feedback has-clear">
    <input type="text" class="form-control" id="exampleInput1" placeholder="Enter text here">
    <span class="form-control-clear glyphicon glyphicon-remove form-control-feedback hidden"></span>
  </div>
  <span class="input-group-btn">
    <button type="button" class="btn btn-primary" id="exampleButton1">Search</button>
  </span>
</div>

CSS

Hide Internet Explorer default clear button using the ::-ms-clear CSS pseudo-element.

::-ms-clear {
  display: none;
}

.form-control-clear {
  z-index: 10;
  pointer-events: auto;
  cursor: pointer;
}

JavaScript

$('.has-clear input[type="text"]').on('input propertychange', function() {
  var $this = $(this);
  var visible = Boolean($this.val());
  $this.siblings('.form-control-clear').toggleClass('hidden', !visible);
}).trigger('propertychange');

$('.form-control-clear').click(function() {
  $(this).siblings('input[type="text"]').val('')
    .trigger('propertychange').focus();
});

https://www.thewebflash.com/clear-button-in-bootstrap-input-group-component/