无法在 django 中删除表单表单内联表单集

Question

我有一个名为 WorkExperienceFormset 的内联表单集。我正在生成表单单击一个按钮。但我无法删除表格。当我单击按钮时，什么也没有发生。

forms.py：

WorkExperienceFormset = inlineformset_factory(Employee, WorkExperience, extra=0, min_num=1,
                                                fields = [
                                                    'previous_company_name',
                                                    'job_designation',
                                                    'from_date',
                                                    'to_date',
                                                    'job_description',
                                                ],
                                                widgets = {
                                                        'previous_company_name': forms.TextInput(attrs={'class': 'form-control form-control-sm'}),
                                                        'job_designation': forms.TextInput(attrs={'class': 'form-control form-control-sm'}),
                                                        'from_date': forms.DateInput(attrs={'class': 'form-control form-control-sm has-feedback-left single_cal', 'id': 'single_cal3'}, format='%m/%d/%Y'),
                                                        'to_date': forms.DateInput(attrs={'class': 'form-control form-control-sm has-feedback-left single_cal', 'id': 'single_cal4'}, format='%m/%d/%Y'),
                                                        'job_description': forms.TextInput(attrs={'class': 'form-control form-control-sm'}),
                                                },
                                                can_delete = True,
                                                can_order = True,
                                            )

模板.html：

<div class="work-formset">
  {% for work_form in work_formset %}
  <div class="work-form">
    <div class="item form-group">
      <label class="col-form-label col-md-4 col-sm-4 col-xs-12 label-align">Previous Company Name</label>
      <div class="col-md-4 col-sm-4 col-xs-12">
        <!-- <input type="text" id="last-name" name="last-name" required="required" class="form-control col-md-7 col-xs-12"> -->
        {{ work_form.previous_company_name }}
      </div>
    </div>
    <div class="item form-group">
      <label class="col-form-label col-md-4 col-sm-4 col-xs-12 label-align">Job Designation</label>
      <div class="col-md-4 col-sm-4 col-xs-12">
        <!-- <input type="text" id="last-name" name="last-name" required="required" class="form-control col-md-7 col-xs-12"> -->
        {{ work_form.job_designation }}
      </div>
    </div>
    <div class="item form-group">
      <label class="col-form-label col-md-4 col-sm-4 col-xs-12 label-align">Job Details</label>
      <div class="col-md-4 col-sm-4 col-xs-12">
        <!-- <input type="text" id="last-name" name="last-name" required="required" class="form-control col-md-7 col-xs-12"> -->
        {{ work_form.job_description }}
      </div>
    </div>
    <div class="item form-group">
      <label class="col-form-label col-md-4 col-sm-4 col-xs-12 label-align">From Date</label>
      <div class="col-md-2 col-sm-2 col-xs-12">
        <!-- <input id="birthday" class="date-picker form-control col-md-7 col-xs-12" required="required" type="text"> -->
        <div class="form-group has-feedback">
          {{ work_form.from_date }}
          <span class="fa fa-calendar-o form-control-feedback left m-1" aria-hidden="true"></span>
        </div>
      </div>
    </div>
    <div class="item form-group">
      <label class="col-form-label col-md-4 col-sm-4 col-xs-12 label-align">To Date</label>
      <div class="col-md-2 col-sm-2 col-xs-12">
        <!-- <input id="birthday" class="date-picker form-control col-md-7 col-xs-12" required="required" type="text"> -->
        <div class="form-group has-feedback">
          {{ work_form.to_date }}
          <span class="fa fa-calendar-o form-control-feedback left m-1" aria-hidden="true"></span>
        </div>
      </div>
    </div>

    <div class="work-form-divider" id="">

    </div>
  </div>

  {% endfor %}
</div>

脚本：

function cloneForm(selector, prefix) {
      var newElement = $(selector).clone(true);
      var total = $('#id_' + prefix + '-TOTAL_FORMS').val();
      var currentFormIndex = total;

      newElement.find(':input').each(function() {
        var name = $(this).attr('name').replace('-' + (total-1) + '-','-' + total + '-');
        var id = 'id_' + name;
        $(this).attr({'name': name, 'id': id}).val('').removeAttr('checked');
      });

      total++;
      $('#id_' + prefix + '-TOTAL_FORMS').val(total);

      var solidLn = '<div class="ln_solid"></div>';
      var deleteBtnId = prefix + '-' + currentFormIndex + '-btn';
      deleteBtn = `<button type="button" value="remove" id="${deleteBtnId}" onClick="deleteForm('${deleteBtnId}', '${prefix}')"><i class="fa fa-minus" aria-hidden="true"></i></button>`
      //deleteBtn = `<a type="button" value="remove" id=${deleteBtnId} onClick='deleteForm("delete", "prefix")'><i class="fa fa-minus" aria-hidden="true"></i></a>`

      $(selector).after(newElement);
      $(newElement).prepend(deleteBtn);
      $(newElement).prepend(solidLn);

    }

    function deleteForm(btn, prefix) {
      console.log(btn, prefix);
      $(btn).parents('.work-form').remove('.work-form');
      console.log("Button: " + $(btn).parents('.work-form'));
    }

cloneForm() 正在工作。但是deleteForm() 不起作用。从console.log 我可以看到当我按下删除按钮时会调用deleteForm()。不知何故，.remove() 不起作用。

我该如何解决这个问题？

Answer 1

就像这条线$(btn).parents('.work-form').remove('.work-form');

.parents() -> parents() 方法返回被选元素的所有祖先元素。

.remove() -> 从 DOM 中移除匹配的元素集。

由于remove() 是相关对象的过滤器，在这种情况下，相关对象只是ID 为.work-form 的单个元素，因此不包含任何.work-form 元素。确保检查您的 DOM 并发现您有 work-form 元素作为孩子存在。

您可以通过使用相关表单的唯一标识符而不是使用 work-form 来简单地解决此问题 元素。