JSFiddle - React, Tailwind, and code Playground

by niki4810

HTML

<input class="data_field" type="text" name="data_field" value=""/>
<span id="icon_clear">x</span>

CSS

.data_field{
    padding-right:20px;
}
span#icon_clear{   
    display:none;
    font-family:verdana;
    cursor:pointer;
    color:#38468F;
    font-weight:bold;
    position:relative;
    height:20px;
    left:-18px; 
}
span#icon_clear:hover{
    color:#ccc;
}

JavaScript

$(document).on('keyup', 'input[name=data_field]', function() {
    if ($(this).val().length > 0) {
        $('#icon_clear').fadeIn(300);
    }
    else {
        $('#icon_clear').fadeOut(300);
    }
});

$(document).on('click','#icon_clear',function() {
    $('input[name=data_field]').val('');
    $(this).delay(700).fadeOut(300);
});