在Django Formset中安全地将表单ID传递给JavaScript函数

{% for form in formset %}
    {{ form.form_id_test }} {# 假设这是一个自定义的表单ID字段 #}
    <button id="delete-form" type="button" class="btn btn-primary mb-2" 
    onclick="deleteFormFunc({{ form.form_id_test }})">
        Delete Form
    </button>
{% endfor %}

{% for form in formset %}
    {# form.form_id_test 如果需要显示此ID，可以保留，但通常不直接作为HTML id使用 #}
    <div class="form-wrapper"> {# 为每个表单提供一个容器 #}
        {{ form.as_p }} {# 渲染整个表单，其中包含一个隐藏的ID字段，其ID为form.id #}
        <button id="delete-button-{{ forloop.counter }}" type="button" class="btn btn-primary mb-2" 
        onclick="deleteFormFunc('{{ form.id }}')">
            Delete Form
        </button>
    </div>
{% endfor %}

function deleteFormFunc(formId) {
    console.log("尝试删除ID为:", formId, "的表单。");

    // 注意：form.id 通常是表单中某个特定字段（如隐藏的主键字段）的HTML ID，
    // 而不是整个表单容器（如 <div class="form-wrapper">）的ID。
    // 如果需要操作整个表单容器，可能需要进行DOM遍历或在HTML中将容器ID传递过来。

    // 示例：通过ID获取并隐藏或移除表单元素（这里获取的是隐藏的ID输入框）
    const hiddenIdField = document.getElementById(formId); 
    if (hiddenIdField) {
        console.log("找到隐藏ID字段:", hiddenIdField);
        // 为了删除整个表单行，我们通常需要找到其父级容器
        const formWrapper = hiddenIdField.closest('.form-wrapper'); // 向上查找最近的 .form-wrapper 元素
        if (formWrapper) {
            console.log("找到表单容器:", formWrapper);
            // 实际删除逻辑，例如发起AJAX请求到后端删除数据，然后移除DOM元素
            // formWrapper.style.display = 'none'; // 隐藏表单
            // formWrapper.remove(); // 从DOM中移除表单
        } else {
            console.warn("未找到隐藏ID字段的父级表单容器 .form-wrapper。");
        }
    } else {
        console.warn("ID为", formId, "的元素（隐藏ID字段）未找到。");
    }
    // 这里可以添加AJAX请求到后端删除表单数据的逻辑
}

<div id="your-formset-container-id"> {# Formset的外部容器 #}
    {% for form in formset %}
        <div class="form-item" data-form-id="{{ form.id }}"> {# 将ID存储在数据属性中 #}
            {{ form.as_p }} {# 渲染整个表单 #}
            <button type="button" class="btn btn-primary mb-2 delete-button">
                Delete Form
            </button>
        </div>
    {% endfor %}
</div>

document.addEventListener('DOMContentLoaded', function() {
    const formsetContainer = document.getElementById('your-formset-container-id'); // 获取Formset的外部容器

    if (formsetContainer) {
        formsetContainer.addEventListener('click', function(event) {
            // 检查点击事件是否来源于具有 'delete-button' 类的元素
            if (event.target.classList.contains('delete-button')) {
                const formItem = event.target.closest('.form-item'); // 向上查找最近的 .form-item 元素
                if (formItem) {
                    const formId = formItem.dataset.formId; // 从数据属性中获取表单ID
                    console.log("通过数据属性和事件委托，尝试删除ID为:", formId, "的表单。");
                    // 调用删除逻辑，可以同时传递表单ID和整个表单元素
                    deleteFormWithEventDelegation(formId, formItem); 
                }
            }
        });
    }

    function deleteFormWithEventDelegation(formId, formElement) {
        console.log("正在处理ID为:", formId, "的表单删除操作。");
        // 这里可以执行AJAX请求到后端删除数据
        // 成功后，从DOM中移除表单元素
        // formElement.remove(); 
    }
});