Edit in JSFiddle

<input type="text" id="textbox" />

$(document).ready(function () {

        $("input[type='text']").keyup(function (e) {
            var textBoxEle = $(this);
            var controlID = textBoxEle.attr("id");
            var spanID = controlID + "spanEle";
            if (e.keyCode == 8) {
                if (textBoxEle.val() == "") {
                    $("#" + controlID + "spanEle").remove();
                }
            }
            else if ($("#" + controlID + "spanEle").length == 0) {
                $('<span class="crossImage"></span>').attr("id", spanID).insertAfter($(this)).hover(function () {
                    textBoxEle.val("");
                    $(this).remove();
                });
            }

        });

        //Code to remove cross image when focussing away from textbox
        $("input[type='text']").blur(function () {
            var controlID = $(this).attr("id");
            var spanID = controlID + "spanEle";
            $("#" + spanID).remove();
        });

        //Code to show cross image when focussing and textbox has content
        $("input[type='text']").focus(function () {
            debugger;
            var textBoxEle = $(this);
            var spanID = $(this).attr("id") +"spanEle";
            if ($(this).val() != "") {
                $('<span class="crossImage"></span>').attr("id", spanID).insertAfter($(this)).hover(function () {
                    textBoxEle.val("");
                    $(this).remove();
                });
            }
        });
    });

.crossImage
{
    background-image : url(https://lh5.googleusercontent.com/---PrlH0gQRY/UiL_csIIvBI/AAAAAAAABoE/ykDhUXstGWM/h120/crossImage.Png);
    background-repeat:no-repeat;
    display:inline-block;
    height:12px;
    width:11px;
    position:relative;
    left:-22px;
}