Динамически удалить 1 форму из набора форм Django

Question

Я использую приведенное ниже для динамического добавления формы в мой набор форм:

. html

{{ form2.management_form }}
      <div id="form_set">
          {% for form2 in form2.forms %}
              <table class="table table2" width=100%>
                <tr>
                  <td width = 17.5%>{{form2.ProductCode}}</td>
                  <td width = 32.5%>{{form2.DescriptionOfGoods}}</td>
                  <td width = 12.5%>{{form2.UnitQty}}</td>
                  <td width = 12.5%>{{form2.Type}}</td>
                  <td width = 12.5%>{{form2.Price}}</td>
                  <td width = 12.5%>{{form2.Amount}}</td>
                </tr>
              </table>
          {% endfor %}
      </div>
      <button id="add_more" class="btn aqua-gradient">Add</button>
      <button id="delete" class="btn aqua-gradient">Delete</button>
      <div id="empty_form" style="display:none">
        <table class='table table2' width=100%>
          <tr>
            <td width = 17.5%>{{form2.empty_form.ProductCode}}</td>
            <td width = 32.5%>{{form2.empty_form.DescriptionOfGoods}}</td>
            <td width = 12.5%>{{form2.empty_form.UnitQty}}</td>
            <td width = 12.5%>{{form2.empty_form.Type}}</td>
            <td width = 12.5%>{{form2.empty_form.Price}}</td>
            <td width = 12.5%>{{form2.empty_form.Amount}}</td>
          </tr>
        </table>
      </div>

$('#add_more').click(function() {
        var counter=0;
        var form_count = $('#id_form-TOTAL_FORMS').val();
        counter++;
        $('#form_set').append($('#empty_form').html().replace(/__prefix__/g, form_count));
        $('#id_form-TOTAL_FORMS').val(parseInt(form_count) + 1);
    });

Это работает отлично - однако мне нужно иметь возможность также удаляйте строку динамически при нажатии кнопки «Удалить», и я пытаюсь найти лучший способ сделать это. Какие-либо предложения? Я попробовал это ниже - но, конечно, это удалит только все формы и только если они пусты. Я хочу просто удалить одну форму за раз. Я чувствую, что мне может понадобиться добавить счетчик к идентификатору выше? Пожалуйста, любые предложения будут очень полезны.

$('#delete').click(function() {

        var form_idx = $('#id_form-TOTAL_FORMS').val();
        $('#form_set').empty($('#empty_form').html().replace(/__prefix__/g, form_idx));
        $('#id_form-TOTAL_FORMS').val(parseInt(form_idx) - 1);
    });

РЕДАКТИРОВАТЬ:

В настоящее время я пытаюсь:

function removeForm(){
  this.parentElement.remove()
  var form_idx = $('#id_form-TOTAL_FORMS').val();
  $('#id_form-TOTAL_FORMS').val(parseInt(form_idx) - 1);
}

$('#add_more').click(function() {
  var btn = document.createElement("BUTTON");
  console.log(btn)
  $('#id_form-'+(form_count)+'-name')[0].parentElement.appendChild(btn)
  btn.innerHTML = "Remove";
  btn.onclick = removeForm


    var form_count = $('#id_form-TOTAL_FORMS').val();
    $('#form_set').append($('#empty_form').html().replace(/__prefix__/g, form_count));
    $('#id_form-TOTAL_FORMS').val(parseInt(form_count) + 1);

});

Answer 1

вы можете добавить кнопку в форму, а затем, назначив ей функцию удаления формы, добавьте в вашу функцию #add_more следующее:

var btn = document.createElement("BUTTON");
$('#id_form-'+(form_count)+'-name')[0].parentElement.appendChild(btn)    
btn.innerHTML = "Remove";
btn.onclick = removeForm

, а функция removeForm выглядит следующим образом:

function removeForm(){
    this.parentElement.remove()
    var form_idx = $('#id_form-TOTAL_FORMS').val();
    $('#id_form-TOTAL_FORMS').val(parseInt(form_idx) - 1);
}

РЕДАКТИРОВАТЬ:

$('#add_more').click(function() {
   var form_count = $('#id_form-TOTAL_FORMS').val();
   $('#form_set').append($('#empty_form').html().replace(/__prefix__/g, form_count));
   $('#id_form-TOTAL_FORMS').val(parseInt(form_count) + 1);
   var btn = document.createElement("BUTTON");
   $('#id_form-'+(form_count)+'-name')[0].parentElement.appendChild(btn)
   btn.innerHTML = "Remove";
   btn.onclick = removeForm
});

РЕДАКТИРОВАТЬ 2 после решения проблемы в чате:

строки:

$('#id_form-'+(form_count)+'-name')[0].parentElement.appendChild(btn) 

и

this.parentElement.remove()

существенно меняется в зависимости от структуры вашего html

. Сначала нужно выбрать, куда добавить кнопку для удаления формы, а во-вторых, найти форму для удаления ...