Динамически добавлять и удалять поля формы PHP из формы (Jquery)
У меня есть некоторые проблемы с кодом, который я написал для добавления и удаления полей в форме. В настоящее время у меня есть скрипт 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
заранее спасибо
Решение
Это потому, что вы звоните, чтобы удалить родителя p из #addcon, У вас нет элемента с таким идентификатором, следовательно, нет родителя 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();
});
Другие решения
Других решений пока нет …