从表单集中动态删除 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);
    });

这非常有效 - 但是我还需要能够在单击“删除”按钮时动态删除一行，并且我正在努力寻找最好的方法来做到这一点。有什么建议么？我在下面尝试过这个——但当然，这只会删除所有表单，而且只有当它们为空时。我只想一次删除一个表格。我觉得我可能需要在上面的 id 上添加一个计数器？请任何建议都会非常有用。

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

在聊天中解决问题后EDIT2：

行：

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

和

this.parentElement.remove()

根据您的 html 结构进行重大更改

第一个是选择添加按钮删除表单的位置，第二个是找到要删除的表单...