Я следовал примерам, представленным в SO вопросе код .Это работает для меня, но, поскольку я не слишком хорош в jQuery, у меня возникают проблемы с расширением этого динамического добавления, чтобы пользователь также мог удалять формы.
Мой шаблон HTML:
{% csrf_token %}
{{ form_2.management_form }}
<div id="form_set">
{% for form in form_2 %}
{{form.non_field_errors}}
{{form.errors}}
<table class='no_error'>
{{ form }}
</table>
{% endfor %}
</div>
<input type="button" value="Add More" id="add_more">
<div id="empty_form" style="display:none">
<table class='no_error'>
{{ form_2.empty_form }}
</table>
</div>
<input type="button" value="Remove" id="remove">
<div id="empty_form" style="display:none">
<table class='no_error'>
{{ form_2.empty_form }}
</table>
</div>
Сценарий jQuery, который я использовал, чтобы заставить кнопку Add More
работать, был взят из связанного SO как
$('#add_more').click(function() {
var form_idx = $('#id_form-TOTAL_FORMS').val();
$('#form_set').append($('#empty_form').html().replace(/__prefix__/g, form_idx));
$('#id_form-TOTAL_FORMS').val(parseInt(form_idx) + 1);
})
Этот код работает очень хорошо, я просто хотел, чтобы некоторый код позволял пользователям также удалять формы.Моя наивная попытка была
$('#remove').click(function() {
var form_idx = $('#id_form-TOTAL_FORMS').val();
$('#form_set').remove($('#empty_form').html().replace(/__prefix__/g, form_idx));
$('#id_form-TOTAL_FORMS').val(parseInt(form_idx) - 1);
})
</script>
Но это не работает.Я видел в Интернете здесь , которые позволяют удалять, но код очень многословен и мне нелегко следовать, и функция удаления не работает.Любые реализации jQuery, которые я мог бы использовать, были бы великолепны!