如何停止向django表单集中的第一个表单添加删除按钮？

Question

我正在使用表单集创建一个动态表单。所以基本上，当用户点击“添加字段”按钮时，一个新的表单将被创建，当用户点击垃圾桶图标时，表单应该被删除！

现在的问题是，删除图标也显示在第一个默认表单上，所以如果单击图标，默认表单也会被删除！如何在克隆表单上添加删除图标？

<script>
function updateElementIndex(el, prefix, ndx) {
        var id_regex = new RegExp('(' + prefix + '-\\d+)');
        var replacement = prefix + '-' + ndx;
        if ($(el).attr("for")) $(el).attr("for", $(el).attr("for").replace(id_regex, replacement));
        if (el.id) el.id = el.id.replace(id_regex, replacement);
        if (el.name) el.name = el.name.replace(id_regex, replacement);
    }

    function addForm(btn, prefix) {
        var formCount = parseInt($('#id_' + prefix + '-TOTAL_FORMS').val());
        var row = $('.dynamic-form:first').clone(true).get(0);
        $(row).removeAttr('id').insertAfter($('.dynamic-form:last')).children('.hidden').removeClass('hidden');
        $(row).children().not(':last').children().each(function() {
            updateElementIndex(this, prefix, formCount);
            $(this).val('');
        });
        $(row).find('.delete-row').click(function() {
            deleteForm(this, prefix);
        });
        $('#id_' + prefix + '-TOTAL_FORMS').val(formCount + 1);
        return false;
    }

    function deleteForm(btn, prefix) {
        $(btn).parents('.dynamic-form').remove();
        var forms = $('.dynamic-form');
        $('#id_' + prefix + '-TOTAL_FORMS').val(forms.length);
        for (var i=0, formCount=forms.length; i<formCount; i++) {
            $(forms.get(i)).children().not(':last').children().each(function() {
                updateElementIndex(this, prefix, i);
            });
        }
        return false;
    }
</script>
<script>
$(function () {
        $('.add-row').click(function() {
            return addForm(this, 'form');
        });
        $('.delete-row').click(function() {
            return deleteForm(this, 'form');
        })
    })
</script>

这是我正在使用的代码片段，我需要添加

<a id="remove-{{ form.prefix }}-row" href="javascript:void(0)" class="delete-row">Delete <em class="icon ni ni-trash-fill text-danger fs-15px"></em></a>

仅在克隆的表单上，默认表单不应包含此内容！请帮帮忙

Answer 1

委派

如果是form，则将'tr‘更改为'form’，如果是'.row‘，则更改为'.row’

​

$("#tb").on('click', '.delete-row', function() {
  $(this).closest('tr').remove()
});

tbody tr:first-child button.delete-row {
  display: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table>
  <tbody id="tb">
    <tr>
      <td>Row 0</td>
      <td><button class="delete-row">Click 0</button></td>
    </tr>
    <tr>
      <td>Row 1</td>
      <td><button class="delete-row">Click 1</button></td>
    </tr>
    <tr>
      <td>Row 2</td>
      <td><button class="delete-row">Click 2</button></td>
    </tr>
  </tbody>
</table>

​