Delegation Example -- By Brian Rosamilia

HTML

<div id='parent'>
    <input class='addItem' type='button' value='Clone First Item in List'>
    <div>List item 1<div class='remove'>Remove</div></div>
    <div>List item 2<div class='remove'>Remove</div></div>
    <div>List item 3<div class='remove'>Remove</div></div>
    <div>List item 4<div class='remove'>Remove</div></div>
    <div id='child' style='margin-left:20px'> 
        <input class='addItem' type='button' value='Clone First Item in List'>
        <div>Sub-list item 1<div class='remove'>Remove</div></div>
        <div>Sub-list item 2<div class='remove'>Remove</div></div>
        <div>Sub-list item 3<div class='remove'>Remove</div></div>
        <div>Sub-list item 4<div class='remove'>Remove</div></div>
    </div>
</div>

JavaScript

//Delegation Example -- By Brian Rosamilia
$(function () {
    $('#parent').delegate('.remove', 'click', function (e) {
        $(this).parent().remove();
    });
    
    $('#parent').delegate('.addItem', 'click', function (e) {
        //Kind of complicated but it's just cloning the first item after the clone button
        $(this).parent().children('input').after($(this).parent().children('div').first().clone());
    })
})