从表单中动态添加和删除PHP表单字段(Jquery)

Question

我编写的向表单添加和删除字段的代码有一些问题。我目前有一个jquery脚本，它正在处理另一组需要相同功能的字段，但出于某种原因，我设置的第二个jquery只是添加字段，而不是删除它们。这是代码。

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>
      <a href="#" class="addContact">Add Contact</a>

脚本：

        $(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>'+
           '<a href="#" class="remCon">Remove Contact</a></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/

提前感谢

Answer 1

这是因为您正在调用以移除#addcon的父p。您没有具有该id的元素，因此没有父p，因此在以下语句中不会删除任何内容：$(this).parents('p').remove();

编辑： 更新示例我觉得你的代码有点重，所以我做了一些更改，应该会提高效率。我们不重写代码中的表单，而只是clone()它，然后将表单附加到包含表单的div中。然后，我们为每个表单分配一个删除按钮，它将删除自己的表单。代码更短，更易于移植。

$('.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 = '<a href="#" class="removeContact">Remove Contact</a>'; // 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();
});

参考文献：clone() append() on()