Блог

привет, я улучшил добавление набора форм Django и сохранил дополнительные данные формы, теперь я хочу удалить дополнительные формы, если пользователю нужно удалить некоторые из них, как это сделать

это мой шаблон и код javascript для добавления дополнительных форм, и он работает абсолютно нормально

 {% extends "base.html" %}
{% load crispy_forms_tags %}
{% block content %}
    <form  method="post" id="regForm" action=".">
        {% csrf_token %}
  <h1>Visa Info:</h1>
  <!-- One "tab" for each step in the form: -->
  <div class="tab">Name:
    {{form.visa_type|as_crispy_field}}

              {{ form.arrival_time|as_crispy_field }}

              {{ form.departure_time|as_crispy_field }}

            {{form.number_of_vistor|as_crispy_field}}
            {{form.purpose_trip|as_crispy_field}}
            {{form.city|as_crispy_field}}
            <h1>user info</h1>
            <div id="userform">
            {% for form_data in formset %}
            {{ form_data.management_form }}
            {{form_data.first_name|as_crispy_field}}
            {{form_data.last_name|as_crispy_field}}
            {{form_data.middle_name|as_crispy_field}}

              {{form_data.date_of_birth|as_crispy_field}}



            {{form_data.gender|as_crispy_field}}
            {{form_data.passport|as_crispy_field}}

              {{form_data.passport_ex|as_crispy_field}}


            {{form_data.nationality|as_crispy_field}}

            {% endfor %}

            </div>
            <a class="btn btn-default" id="{{ formset.prefix }}">add</a>
            {{ formset.management_form }}
  </div>
  <div class="tab">Dliver Information:
    {{emailForm.email|as_crispy_field}}
    {{emailForm.instructions|as_crispy_field}}
    Do you want the real visa to be dlever to you?
    <div class="btn btn-primary" id="show">yes</div>
    <div class="btn btn-danger" id="hide">no</div>
    <div class="menu">
        {{dliveryform|crispy}}
    </div>
  </div>
  <div style="overflow:auto;">
    <div style="float:right;">
      <button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
      <button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
    </div>
  </div>
  <!-- Circles which indicates the steps of the form: -->
  <div style="text-align:center;margin-top:40px;">
    <span class="step"></span>
    <span class="step"></span>
    <span class="step"></span>
    <span class="step"></span>
  </div>
</form>
{% endblock content %}
{% block javascript %}
    <script>

    $(document).ready(function(){
        // $('[data-toggle="datepicker"]').datepicker();
        var input = $('#userform').find('input')
        // console.log(input)
        // $("body").on('click', '.add-form-row',function () {
        //  return addForm($(this), String($(this).attr('id')));
        // });
        // var a = 1;
        // while (a) {
        //  console.log('test')
        // }
        $('#id_number_of_vistor').change(()=>{
            var key = $('#id_number_of_vistor option:selected').text();
            console.log(key)
            if (key > 1){
                for ( ;key > 1; --key) {
                    cloneMore('#userform','Visitor');
                }
            }else{
                //delete the formset
            }

        })
        // console.log($('#id_number_of_vistor option:selected').text())
        $('.menu').hide("slide");
        $('#show').click(function() {
          $('.menu').toggle("slide");
        });
        $('#hide').click(function() {
          $('.menu').hide("slide");
        });
    });


    function cloneMore(selector, type) {
        var newElement = $(selector).clone(true);
        var total = $('#id_'   type   '-TOTAL_FORMS').val();
        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');
        });
        newElement.find('label').each(function() {
            var newFor = $(this).attr('for').replace('-'   (total-1)   '-','-'   total   '-');
            $(this).attr('for', newFor);
        });
        total  ;
        $('#id_'   type   '-TOTAL_FORMS').val(total);

        $(selector).after(newElement);
    }


    </script>
{% endblock javascript %}
 

я хочу удалить его с помощью javascript, как это сделать?

я пробовал много вещей с javascript, но он не работает