从Formset动态删除Django的1个表单 [英] Remove 1 Form from Formset Dynamically Django

问题描述

我正在使用以下内容将表单动态添加到我的表单集中:

I am using the below to dynamically add a form to my formset:

.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);
    });

这非常好-但是，单击删除"按钮时，我还需要能够动态删除一行，而且我正在努力寻找最佳的方法来做到这一点.有什么建议?我曾在下面尝试过此方法-但当然只有在所有表单为空的情况下，它才会删除所有表单.我只想一次删除一个表格.我觉得我可能需要在上面的ID上添加一个计数器?请提出任何建议将非常有用.

This works perfectly - however I need to be able to delete a line dynamically as well when the Delete button is clicked, and I'm struggling with working through the best way to do that. Any suggestions? I had tried this below - but of course that will only delete all forms and only if they are empty. I want to just delete one form at a time. I feel I may need to add a counter to the id above? Please any suggestions would be very useful.

$('#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);

});

推荐答案

您可以在表单中添加一个按钮，然后为它添加一个删除表单的函数，将以下内容添加到您的#add_more函数中:

you can add a button to the form and then assing it a function to delete the form add the following to your #add_more function:

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

和removeForm函数如下:

and the removeForm function looks like:

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
});

解决聊天中的问题后

EDIT2 after solving the issue in chat:

行:

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

和

this.parentElement.remove()

根据您的html的结构，重大更改

change significant depending on the structure of your html

第一个是选择在何处添加按钮以删除表单，第二个是找到要删除的表单...

the first is to select where to add the button to delete a form and the second is to find the form to delete...

这篇关于从Formset动态删除Django的1个表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！