ui.js

gistfile1.txt

$(document).ready(function(){
	$('a.remove-participant').live('click', function(){
	  console.log("Clicked remove");
	  $(this).parent('.participant').hide();
	  $(this).siblings('.destroy_participant').find('input[type="hidden"]').val(1);
    return false;
	});
});

participants.html

<div class='participant'>
                      <div class='group'>
                        <li class="string optional" id="program_enrollments_attributes_0_first_name_input"><label for="program_enrollments_attributes_0_first_name">First name</label><input class="text" id="program_enrollments_attributes_0_first_name" maxlength="30" name="program[enrollments_attributes][0][first_name]" size="30" type="text" value="Josh" /></li>
                      </div>
                      <div class='group'>
                        <li class="string optional" id="program_enrollments_attributes_0_last_name_input"><label for="program_enrollments_attributes_0_last_name">Last name</label><input class="text" id="program_enrollments_attributes_0_last_name" maxlength="30" name="program[enrollments_attributes][0][last_name]" size="30" type="text" value="Owens" /></li>
                      </div>
                      <div class='group'>
                        <li class="string optional" id="program_enrollments_attributes_0_email_input"><label for="program_enrollments_attributes_0_email">Email</label><input class="text" id="program_enrollments_attributes_0_email" maxlength="30" name="program[enrollments_attributes][0][email]" size="30" type="text" value="[email protected]" /></li>
                      </div>
                      <div class='group sessions'>
                        <li class="select optional" id="program_enrollments_attributes_0_number_of_sessions_input"><label for="program_enrollments_attributes_0_number_of_sessions"># of sessions</label><select id="program_enrollments_attributes_0_number_of_sessions" name="program[enrollments_attributes][0][number_of_sessions]"><option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option></select></li>
                      </div>
                      <div class='group gift'>
                        <li class="boolean optional" id="program_enrollments_attributes_0_gift_input"><label for="program_enrollments_attributes_0_gift"><input name="program[enrollments_attributes][0][gift]" type="hidden" value="0" /><input class="gift" id="program_enrollments_attributes_0_gift" name="program[enrollments_attributes][0][gift]" type="checkbox" value="1" />Gift?</label></li>
                      </div>
                      <div class='group message'>
                        <li class="string optional" id="program_enrollments_attributes_0_gift_message_input"><label for="program_enrollments_attributes_0_gift_message">Gift message</label><input id="program_enrollments_attributes_0_gift_message" maxlength="255" name="program[enrollments_attributes][0][gift_message]" size="50" type="text" /></li>
                      </div>
                    </div>
                    <a href="#" class="remove-participant">Remove Participant</a>
                  </div>