//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()); }) })
<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>