If shoppers on our site change their minds about items they have added to their carts, they can change the Quantity field for those items to 0. We can provide a more reassuring behavior, though, by adding explicit Delete buttons for each item. The actual effect of the button can be the same as changing the Quantity field, but the visual feedback can reinforce the fact that the item will not be purchased.

First, we need to add the new buttons. Since they won’t function without JavaScript, we won’t put them in the HTML. Instead, we’ll let jQuery add them to each row:

$('<th>&nbsp;</th>').insertAfter('#cart thead th:nth-child(2)');
$('#cart tbody tr').each(function() {
  $deleteButton = $('<img />').attr({
    'width': '16',
    'height': '16',
    'src': '../icons/cross.png',
    'alt': 'remove from cart',
    'title': 'remove from cart',
    'class': 'clickable'
  });
  $('<td></td>').insertAfter($('td:nth-child(2)', this))
    .append($deleteButton...