jQuery UI Button Example - Trash Icon w/ NO Text (Simple)

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css">
<!-- replace href with actual delete link,
     e.g. /delete-example.php?id=17
          - OR -
          /admin/images/delete/17
-->
<button class="table-delete-link ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" style="color: green;" role="button" aria-disabled="false" title="Delete" href="/echo/json/">
    <span class="ui-button-icon-primary ui-icon ui-icon-trash ui-icon-red" ></span>
    <span class="ui-button-text">Delete</span>
</button>

CSS

button.ui-button-icon-only
{
    width: 32px !important;
    height: 32px !important;
}


.ui-icon-red
{
    background-image: url("http://drupal.org/files/issues/ui-icons-800000-256x240.png") !important;
}

JavaScript

$(document).ready(function() {
    $('button.table-delete-link').click(function () {
        var targetUrl = $(this).attr('href');
        $.ajax({
            url: targetUrl,
            type: 'GET',
            success: function (data, textStatus, xhr) {
                alert('Item successfully deleted!');
            },
            error: function (xhr, textStatus, errorThrown) {
                var errorMessage = xhr.responseText;
                errorMessage = errorMessage.substring(errorMessage.indexOf('<title>') + 7, errorMessage.indexOf('</title>'));
                alert('Unable to delete item: ' + errorMessage);
            }
        });
        return false;
    });
});