從表單中動態添加和刪除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()