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

这是因为您要求删除p的父#addcon。您没有具有该ID的元素，因此没有父p，因此在此声明中不会删除任何内容：$(this).parents('p').remove();

编辑： UPDATED EXAMPLE 我觉得你的代码有点沉重，所以我做了一些改变，应该让它更有效率。不是在代码中重写表单而只是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()

从表单动态添加和删除PHP表单字段（Jquery）

1 个答案: