如何让Django formset仅在克隆新增的表单上添加删除按钮

算力阿峰

2026-10-3

解决方案

前置调整

首先修改你的表单模板，默认渲染的首个.dynamic-form元素不要包含删除按钮代码，保证首屏加载的默认表单没有删除入口，从根源避免误删。

核心代码修改

首先修复updateElementIndex方法里的正则表达式转义问题，原代码的\d未正确转义会导致匹配失效：

function updateElementIndex(el, prefix, ndx) {
    // 修正\d转义
    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);
}

修改addForm方法，在克隆生成新表单后，手动插入删除按钮并适配当前表单序号：

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('');
    });
    // 新增：给克隆的表单插入删除按钮
    const deleteBtn = `
    <a id="remove-${prefix}-${formCount}-row" href="javascript:void(0)" class="delete-row">
        Delete <em class="icon ni ni-trash-fill text-danger fs-15px"></em>
    </a>`;
    // 此处可根据你的页面结构调整插入位置，比如插入到表单的操作列容器中，示例为直接插入到表单行末尾
    $(row).append(deleteBtn);
    // 绑定删除事件
    $(row).find('.delete-row').click(function() {
        deleteForm(this, prefix);
    });
    $('#id_' + prefix + '-TOTAL_FORMS').val(formCount + 1);
    return false;
}