Django：无法删除表单集表单（前端使用Javascript）

Question

我有一个基本的发票应用程序，在单个发票更新视图中，可以添加和删除发票的元素。 不幸的是，添加它们并不起作用。 即使在前端（通过Javascript）将其删除， TOTAL_FORMS的数量TOTAL_FORMS减少，并且formset.cleaned_data仅显示呈现的表单，它们仍然保存在模型实例中。

发票型号：

class Invoice(models.Model):
    class Meta:
        verbose_name = "invoice"
        verbose_name_plural = "invoices"

    def __str__(self):
        return  f"{str(self.date)}-{self.client.name}"

    def get_absolute_url(self):
        return reverse("invoice-list")

    @property
    def total(self):
        tot = 0
        for el in self.elements.all():
            tot += el.price
        return tot

    date = models.DateField(auto_now_add=True)
    client = models.ForeignKey(Client, on_delete=models.CASCADE, related_name='clients')
    user = models.ForeignKey(User, on_delete=models.CASCADE, related_name="invoices")

元素模型：

class Element(models.Model):

    class Meta:
        verbose_name = "element"
        verbose_name_plural = "elements"

    def __str__(self):
        return self.name

    name = models.CharField(max_length=200, blank=False, null=False)
    price = models.IntegerField()
    invoice = models.ForeignKey(Invoice, on_delete=models.CASCADE, related_name="elements")

发票表单和元素表单集：

class InvoiceForm(ModelForm):
    class Meta:
        model = Invoice
        fields = ['client']

    def __init__(self, *args, **kwargs):
        userid = kwargs.pop('userid', None)
        super().__init__(*args, **kwargs)
        self.fields['client'] = forms.ModelChoiceField(queryset=Client.objects.filter(user_id=userid))


InlineElementFormsetUpdate = inlineformset_factory(Invoice, Element, fields=('name', 'price'),
extra=0, can_delete=True)

发票UpdateView：

def update_formset(request, id):
    user = request.user
    invoice = Invoice.objects.get(id=id)
    elements = invoice.elements.all()
    invoice_form = InvoiceForm(instance=invoice)
    if request.method == 'POST':
        invoice_form = InvoiceForm(request.POST, instance=invoice, userid=user.id)
        formset = InlineElementFormsetUpdate(request.POST, instance=invoice)
        if invoice_form.is_valid():
            print('invoice is valid')
            created_invoice = invoice_form.save()
            formset = InlineElementFormsetUpdate(request.POST, instance=created_invoice)
            # print(formset)
            if formset.is_valid():
                print('Elements are valid')
                print(formset.cleaned_data)
                # print(invoice_form.cleaned_data)
                created_invoice.save()
                formset.save()
                messages.success(request, 'Invoice updated correctly!')
                return HttpResponseRedirect(reverse('invoices:invoice-list'))
            else:
                print(formset.errors)
                return HttpResponseRedirect(reverse('invoices:invoice-list'))
    else:
        invoice_form = InvoiceForm(instance=invoice, userid=user.id)
        formset = InlineElementFormsetUpdate(instance=invoice)
    return render(request, 'invoices/testinlineform_update.html', {
        'invoice_form': invoice_form,
        'formset': formset
        })

最后是模板。 大多数Javascript代码都来自这里： https : //gist.github.com/jteso/2130643 。 cloneMore函数负责克隆一个元素表单，从表单行DOM元素中获取最后一个元素。 它还会更新TOTAL_FORMS值。 deleteForm函数的作用与此相反。 我不清楚问题是否出在javascript代码中还是在我的视图/表单中，因此任何指导都可以被接受。

{% extends "../index.html" %}

{% load crispy_forms_tags %}

{% block content %}
<h1>Update Invoice</h1>
    <form action="" method="post">{% csrf_token %}
    {% comment %} {{ invoice_form|crispy }} {% endcomment %}
    <div class="row">
        <div class="col-6">
            {{ invoice_form.client|as_crispy_field }}
        </div>
    </div>
    <h2>Elements</h2>
    {{ formset.management_form }}
    <div class="row">
    {% for form in formset  %}
    <div class="form-row">
        <div class="col-6">
            {{ form.name|as_crispy_field }}
        </div>
        <div class="col-6">
            {{ form.price|as_crispy_field }}
            <button class="btn btn-danger remove-form-row">Remove</button>
            {{ form.id }}
        </div>
    </div>
    {% endfor %}
    </div>
    <button class="btn btn-success add-form-row">Add Additional Form</button>
    <div>
        <h3>Total: <span class="totalPrice"></span></h3>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
    </div>
    </form>
{% endblock %}

{% block scripts %}
<script defer>
    $(document).ready(function () {
        // this is to add multiple forms for elements
        function updateElementIndex(el, prefix, ndx) {
            var id_regex = new RegExp('(' + prefix + '-\\d+)');
            var replacement = prefix + '-' + ndx;
            if ($(el).attr("for")) $(el).attr("for", $(el).attr("for").replace(id_regex, replacement));
            if (el.id) el.id = el.id.replace(id_regex, replacement);
            if (el.name) el.name = el.name.replace(id_regex, replacement);
        }
        function cloneMore(selector, prefix) {
        var newElement = $(selector).clone(true);
        console.log($('.form-row'))
        var newElemtoCons = $(selector).find(':input:not([type=button]):not([type=submit]):not([type=reset]):not(".add-element")').each(function() {
            //console.log($(this))
        })
        // console.log(newElemtoCons)
        var total = $('#id_' + prefix + '-TOTAL_FORMS').val();
        //console.log(total)
        newElement.find(':input:not([type=button]):not([type=submit]):not([type=reset]):not(".remove-form-row")').each(function() {
            var name = $(this).attr('name').replace('-' + (total-1) + '-', '-' + total + '-');
            var id = 'id_' + name;
            $(this).attr({'name': name, 'id': id}).val('').removeAttr('checked');
        });
        newElement.find('label').each(function() {
            var forValue = $(this).attr('for');
            if (forValue) {
            forValue = forValue.replace('-' + (total-1) + '-', '-' + total + '-');
            $(this).attr({'for': forValue});
            }
        });
        total++;
        $('#id_' + prefix + '-TOTAL_FORMS').val(total);
        $(selector).after(newElement);
        var conditionRow = $('.form-row:not(:last)');
        conditionRow.find('.btn.add-form-row')
        .removeClass('btn-success').addClass('btn-danger')
        .removeClass('add-form-row').addClass('remove-form-row')
        .html('<span class="glyphicon glyphicon-minus" aria-hidden="true">Remove</span>');
        return false;
        }
        function deleteForm(prefix, btn) {
            var total = parseInt($('#id_' + prefix + '-TOTAL_FORMS').val());
            if (total > 1){
                btn.closest('.form-row').remove();
                var forms = $('.form-row');
                $('#id_' + prefix + '-TOTAL_FORMS').val(forms.length);
                for (var i=0, formCount=forms.length; i<formCount; i++) {
                    $(forms.get(i)).find(':input').each(function() {
                        updateElementIndex(this, prefix, i);
                    });
                }
            }
            return false;
        }
        $(document).on('click', '.add-form-row', function(e){
            // console.log($('#id_elements-0-price').val())
            e.preventDefault();
            // console.log($(this))
            cloneMore('.form-row:last', 'elements');
            var tot = 0;
            currentTotal = $('.form-row').find('input[type=number]').each(function() {
                if($(this).val() != ""){
                    numberPrice = parseInt($(this).val());
                    tot += numberPrice;
                }
            });
            $('.totalPrice').text(`${tot} €`)
            return false;
        });
        $(document).on('click', '.remove-form-row', function(e){
            e.preventDefault();
            deleteForm('elements', $(this));
            var tot = 0;
            currentTotal = $('.form-row').find('input[type=number]').each(function() {
                if($(this).val() != ""){
                    numberPrice = parseInt($(this).val());
                    tot += numberPrice;
                }
            });
            $('.totalPrice').text(`${tot} €`)
            return false;
        });
    });
</script>
{% endblock  %}