Невозможно удалить встроенный набор форм формы в 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() -> Метод parent () возвращает все элементы-предки выбранного элемента.

.remove() -> Удалить набор согласованных элементов из DOM.

Поскольку remove() является фильтром для рассматриваемого объекта, в этом случае рассматриваемый объект представляет собой всего лишь единственный элемент с идентификатором .work-form, поэтому не содержащий любые .work-form элементы. Обязательно проверьте свой DOM и обнаружите, что у вас есть work-form элементов, присутствующих в качестве дочерних.

Вы можете просто решить эту проблему, используя уникальный идентификатор для рассматриваемой формы вместо использования work-form элемент.