textbox clear all

HTML

<div ng-app="clearTextExample">
    <div clear-text>
        <input type="text" ng-model="FirstName" name="" value="" placeholder="FirstName" />
    </div>
    <div clear-text>
        <input type="text" ng-model="LastName" name="" value="" placeholder="LastName" />
    </div>
</div>

CSS

</style> <!-- Ugly Hack to make remote files preload in jsFiddle --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script> <style> .clearable {
    display: inline-block;
    *display: inline;
    zoom: 1;
    height:30px;
}
.clearable input {
    float: left;
    background: transparent;
    cursor:pointer;
}
.clearable.x {
    background: transparent url(http://s28.postimg.org/q4fsorod5/clear_Text_dark.png) no-repeat 95% center;
}
.clearable.onX {
    background: transparent url(http://s28.postimg.org/82wnqyuc9/clear_Text_light.png) no-repeat 95% center;
}

JavaScript

angular.module('clearTextExample', []).
directive('clearText', function () {
    var directiveDefinitionObject = {
        link: function link(scope, element, attrs) {

            element.addClass("clearable");

            function tog(v) {
                return v ? 'addClass' : 'removeClass';
            }

            element.keyup(function () {
                element[tog(element.children('input[type=text]:only-child').val())]('x');
            }).mousemove(function (e) {
                e.preventDefault();
                if (element.hasClass('x')) {
                    element[tog(((this.offsetWidth - 30) < (e.clientX - this.getBoundingClientRect().left)) && ((this.offsetWidth - 5) > (e.clientX - this.getBoundingClientRect().left)) && ((this.offsetHeight - 30) < (e.clientY - this.getBoundingClientRect().top)) && ((this.offsetHeight - 5) > (e.clientY - this.getBoundingClientRect().top)))]('onX');
                }
            }).click(function (e) {
                e.preventDefault();
                if (element.hasClass('onX')) {
                    element.removeClass('x onX');
                    element.children('input[type=text]:only-child').val('');
                }
            });
        }
    };

    return (directiveDefinitionObject);
});