Dynamically Add and Remove PHP Form fields from form (Jquery) - php

Question

I'm having some issues with the code that i wrote up to add and remove fields to a form. I currently have a jquery script that is working on another group of fields that require the same functionality, but for some reason this second Jquery i have set up is only adding the fields and not removing them here is the code.
HTML:
<label for="EmergeContactType">Emergency Contacts</label>
<hr>
<div class="addcon">
<p>
<label for="EmergeContactType">Affilation</label>
<select name="properties[EmergContactType]">
<option value="1">Primary</option>
<option value="2">Secondary</option>
<option value="3">Doctor</option>
<option value="4">Aunt</option>
<option value="5">Uncle</option>
<option value="1">Babysitter</option>
<option value="2">Caregiver</option>
<option value="3">Grandmother</option>
<option value="4">Grandfather</option>
<option value="5">Step-mother</option>
<option value="5">Step-father</option>
</select><br>
<label for="EmergeContactType">Name</label><br>
<input type="text" size="20" class="emerg" name="properties[EmergencyName]" align="right" /><br>
<label for="EmergeContactType">Number</label><br>
<input type="text" width="15" maxlength="15" class="emerg" name="properties[EmergContactNum]" pattern="[789][0-9]{9}" align="right"/><br>
</p>
</div>
Add Contact
Script:
$(function() {
var plusDiv = $('#addcon');
var y = $('#addcon p').size() + 1;
$('#addContact').on('click', function() {
$('<p>'+
'<label for="EmergeContactType">Affilation</label>'+
'<select name="properties[EmergContactType'+ y +']">'+
'<option value="1">Primary</option>'+
'<option value="2">Secondary</option>'+
'<option value="3">Doctor</option>'+
'<option value="4">Aunt</option>'+
'<option value="5">Uncle</option>'+
'<option value="1">Babysitter</option>'+
'<option value="2">Caregiver</option>'+
'<option value="3">Grandmother</option>'+
'<option value="4">Grandfather</option>'+
'<option value="5">Step-mother</option>'+
'<option value="5">Step-father</option>'+
'</select><br>'+
'<label for="EmergeContactType">Name</label><br>'+
'<input type="text" id="EmergencyName" class="textbox" name="properties[EmergencyName'+ y +']" /><br>'+
'<label for="EmergeContactType">Number</label><br>'+
'<input type="text" id="EmergContactNum" class="textbox" name="properties[EmergContactNum'+ y +']" /><br>'+
'Remove Contact</p>').appendTo(plusDiv);
y++;
return false;
});
plusDiv.on('click', '.remCon', function() {
if( i > 2 ) {
$(this).parents('p').remove();
y--;
}
return false;
});
});
JFiddle
http://jsfiddle.net/4SVXt/23/
Thanks in advance

Answer 1

It's because you're calling to remove the parent p of #addcon. You don't have an element with that id, hence no parent p so nothing gets removed in this statement: $(this).parents('p').remove();
EDIT :
UPDATED EXAMPLE
I felt like your code was a little heavy so I made some changes that should make this more efficient. Instead of rewriting the form in the code we just clone() it, then append the form to the div containing the forms. We then assign a remove button to each form that will remove its own form. The code is shorter and much more portable.
$('.addContact').click(function(e) {
e.preventDefault();
var clonedForm = $('form[name="add_contact"]:first').clone(); // clone the form
$('.addcon').append(clonedForm); // append the form to the div
var removeLink = 'Remove Contact'; // create a remove link
$('form[name="add_contact"]:last').append(removeLink);
});
$('.addcon').on('click', '.removeContact', function(e) { // use on() to delegate
e.preventDefault();
$(this).closest('form').remove();
});
References:clone() append() on()