## mark a section (Learn more)

## 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() } }) } }) })

This paste will be private.