jquery - How to make a clear x icon within top right of textarea on focus -

i using bootstrap 3 , know how make textarea clear x icon appear when user on focus youtube comment textarea.

use jquery focus/focusout show/hide icon. use background image that. http://api.jquery.com/focus/

and attach click event, checks in box user clicked. example, if between 0 , 10px right, assume clicked icon.

code should this:

$('#element').focus(function() {      $(this).css('background', 'red'); });  $('#element').focusout(function() {      $(this).css('background', 'white'); });  $('#element').click(function(e) {     if (($(this).width()-(e.pagex - $(this).position().left)) < 10){         alert('clear textbox');     } }); 

or better, chained code:

$('#element').focus(function() {      $(this).css('background', 'red'); }).focusout(function() {      $(this).css('background', 'white'); }).click(function(e) {     if (($(this).width()-(e.pagex - $(this).position().left)) < 20){         $(this).val('');     } });