## template [plaintext]
<div id="items">
<? foreach($items as $item): ?>
  <div id="item_<?= $item->id ?>">
    <h2><?= $item->title ?></h2>
    <p>This is some item. <a class="delete" href="#">Delete it</a></p>
  </div>
<? endforeach ?>
</div>

## result [html]
<div id="items">
  <!-- the number in the element ID is database ID also -->
  <div id="item_1">
    <h2>Some awesome item</h2>
    <p>This is some item. <a class="delete" href="#">Delete it</a></p>
  </div>
  <div id="item_2">
    <h2>Another awesome item</h2>
    <p>This is some item. <a class="delete" href="#">Delete it</a></p>
  </div>
</div>

## JavaScript
// wait until the document is loaded
document.observe("dom:loaded", function() {
  // a mouse click is observed on the "items" DIV
  $('items').observe('click', function(e) {
    var link = null
    // was the click on a link with a class "delete"?
    if ((link = e.findElement('a.delete') && confirm("Are you sure you want to delete this item?")) {
      // find the div and its ID, extract the number from it
      var div = link.up('div'), id = div.id.split('_').last()
      new Ajax.Request('/delete/path', {
        method: 'post', // don't use GET for destructive operations
        parameters: { id: id }, // will be available as $_POST['id']
        onSuccess: function(){
          // bye bye, record!
          div.remove()
        }
      })
    }
  })
})