Django删除模型记录添加警告弹窗仅删除第一条记录问题排查

你遇到的问题核心是HTML元素id全局重复：

• 你把模态框写在遍历表格的for循环内，每一行都会生成一个id为deleteRecord的模态框，而HTML规范要求同页面id必须唯一，浏览器匹配id时只会返回第一个找到的元素，所以不管点击哪一行的删除按钮，弹出的都是第一行对应的模态框，自然只会删除第一条记录。
• 额外小问题：你将<tbody>标签也写在了for循环内，每一行都生成了一个独立的tbody，不符合表格结构规范；另外模态框内使用了不存在的{{j.nombre}}字段，你定义的Contact模型里姓名字段是firstname和lastname。

采用「单个公共模态框+动态注入数据」的方案即可解决，不需要为每行生成独立模态框：

第一步：调整HTML结构 #

• 把模态框移出for循环，整个页面只保留一个公共的删除模态框
• 把<tbody>移到for循环外面，仅保留一个
• 在删除按钮上新增自定义属性存储当前记录的id、姓名等信息
  调整后的核心代码示例：

<table id="datatable" class="table table-bordered dt-responsive  nowrap w-100">
    <thead>
        <div style="text-align: center;" class="card-body">
            <h4>Contact list</h4>
        </div>
        <tr>
            <th style="text-align: center;">First name</th>
            <th style="text-align: center;">Last Name</th>
            <th style="text-align: center;">Position</th>
            <th style="text-align: center;">Cellphone</th>
            <th style="text-align: center;">Email</th>
            <th style="text-align: center;">Birthday</th>
            <th style="text-align: center;">Edit</th>
            <th style="text-align: center;">Delete</th>
        </tr>
    </thead>
    <!-- tbody移到循环外 -->
    <tbody>
        {% for j in obj2 %}
        <tr>
            <td style="text-align: center;">{{j.firstname}}</td>
            <td style="text-align: center;">{{j.lastname}}</td>
            <td style="text-align: center;">{{j.position}}</td>
            <td style="text-align: center;">{{j.cellphone}}</td>
            <td style="text-align: center;"><a href="mailto:{{j.email}}">{{j.email}}</a></td>
            <td style="text-align: center;">{{j.birthday}}</td>
            <td style="text-align: center;"><a href="/clients/edit/contact/{{j.id}}" class="text-success"><i class="mdi mdi-pencil font-size-18"></i></a></td>
            <td style="text-align: center;">
                <!-- 新增data-*属性存储当前记录信息 -->
                <i style="color: red; font-size: 16px; cursor: pointer;" 
                   data-bs-toggle="modal" 
                   data-bs-target="#deleteRecord" 
                   data-contact-id="{{j.id}}"
                   data-contact-name="{{j.lastname}} {{j.firstname}}"
                   class="bx bx-trash"></i>
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>

<!-- 公共模态框，放在表格外，不在循环内 -->
<div class="modal fade" id="deleteRecord" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">确认删除</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p style="text-align: justify;" id="deleteTip"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">取消</button>
                <!-- 给确认按钮加id方便动态修改链接 -->
                <a id="confirmDeleteBtn" class="btn btn-danger">确认删除</a>
            </div>
        </div>
    </div>
</div>

第二步：新增JS逻辑动态更新模态框内容 #

监听模态框的显示事件，读取触发按钮存储的记录信息，动态更新提示文本和删除链接：

// 适配Bootstrap 5的模态框事件，如果你用的是Bootstrap 4对应修改事件名即可
const deleteModal = document.getElementById('deleteRecord')
deleteModal.addEventListener('show.bs.modal', function (event) {
  // 获取触发当前模态框的删除按钮
  const triggerBtn = event.relatedTarget
  // 读取记录信息
  const contactId = triggerBtn.dataset.contactId
  const contactName = triggerBtn.dataset.contactName
  // 更新提示文本
  document.getElementById('deleteTip').textContent = `联系人 ${contactName} 的数据删除后将永久无法恢复，是否确认操作？`
  // 更新删除链接，替换为你后端实际的删除路由
  document.getElementById('confirmDeleteBtn').setAttribute('href', `/clients/delete/contact/${contactId}`)
})

内容的提问来源于stack exchange，提问作者Adrian