如何用PHP实现带ID传递的Bootstrap删除确认模态框

问题根源 #

你当前的代码在foreach循环里为每一行数据都生成了ID为deleteModal的模态框，DOM中不允许存在重复ID，这会导致点击删除按钮时只会触发第一个模态框，同时ID传递逻辑也会混乱。正确的做法是只使用一个模态框，通过JavaScript动态将当前要删除的ID传递到模态框的确认链接中。

修正后的代码 #

1. PHP/HTML部分（仅保留一个模态框） #

将模态框移出循环，给删除按钮添加自定义data-id属性存储当前行的ID：

<?php
$busqueda=$conn->query("select * from productos");
$arrDatos=$busqueda->fetchAll(PDO::FETCH_ASSOC);
?>
<table>
<?php foreach ($arrDatos as $muestra): ?>
    <tr>
        <td><?= $muestra['id'] ?></td>
        <td><?= $muestra['nombre'] ?></td>
        <td><?= $muestra['unidades'] ?></td>
        <td>
            <!-- 添加data-id存储当前ID，用于触发模态框 -->
            <button class='btn btn-danger delete-btn' data-bs-toggle='modal' data-bs-target='#deleteModal' data-id="<?= $muestra['id'] ?>">   
                <ion-icon name='trash-outline'></ion-icon>
            </button>
        </td>
    </tr>
<?php endforeach; ?>
</table>

<!-- 单个模态框，放在循环外部 -->
<div class='modal fade' id='deleteModal' tabindex='-1' aria-labelledby='deleteModalLabel' aria-hidden='true'>
    <div class='modal-dialog'>
        <div class='modal-content'>
            <div class='modal-header'>
                <h1 class='modal-title fs-5' id='deleteModalLabel'>¿Estás seguro de que quieres borrar el elemento?</h1>
                <button type='button' class='btn-close' data-bs-dismiss='modal' aria-label='Close'></button>
            </div>
            <div class='modal-body'>
                ¿Estás seguro de que quieres borrar este elemento?
            </div>
            <div class='modal-footer'>
                <button type='button' class='btn btn-secondary' data-bs-dismiss='modal'>No</button>
                <!-- 此链接地址将通过JavaScript动态修改 -->
                <a href='' id='confirmDeleteBtn' class='btn btn-danger'>Sí</a>
            </div>
        </div>
    </div>
</div>

2. JavaScript部分（动态设置删除ID） #

添加一段JS代码，监听模态框的显示事件，获取点击按钮的data-id并更新确认链接：

// 监听模态框显示事件
document.getElementById('deleteModal').addEventListener('show.bs.modal', function (event) {
    // 获取触发模态框的删除按钮
    const button = event.relatedTarget;
    // 提取按钮上存储的ID
    const deleteId = button.getAttribute('data-id');
    // 获取模态框内的确认链接
    const confirmBtn = document.getElementById('confirmDeleteBtn');
    // 更新确认链接的跳转地址
    confirmBtn.href = 'del.php?id=' + deleteId;
});

方案优势 #

• 避免DOM重复ID问题，所有删除按钮共享一个模态框，减少冗余代码。
• 用data-id传递ID，结合Bootstrap模态框事件动态更新链接，逻辑清晰易懂。
• 将<a>标签改为<button>更符合语义，因为点击操作是触发模态框而非直接跳转。

可选方案（不推荐） #

如果坚持为每行生成独立模态框，需给每个模态框设置唯一ID，同时删除按钮的data-bs-target指向对应ID：

<?php foreach ($arrDatos as $muestra): ?>
    <tr>
        <!-- 表格内容不变 -->
        <td>
            <a href='#' class='btn btn-danger' data-bs-toggle='modal' data-bs-target='#deleteModal-<?= $muestra['id'] ?>'>   
                <ion-icon name='trash-outline'></ion-icon>
            </a>
        </td>
    </tr>

    <!-- 模态框设置唯一ID -->
    <div class='modal fade' id='deleteModal-<?= $muestra['id'] ?>' tabindex='-1' aria-labelledby='deleteModalLabel-<?= $muestra['id'] ?>' aria-hidden='true'>
        <div class='modal-dialog'>
            <div class='modal-content'>
                <div class='modal-header'>
                    <h1 class='modal-title fs-5' id='deleteModalLabel-<?= $muestra['id'] ?>'>¿Estás seguro de que quieres borrar el elemento?</h1>
                    <button type='button' class='btn-close' data-bs-dismiss='modal' aria-label='Close'></button>
                </div>
                <div class='modal-body'>
                    ¿Estás seguro de que quieres borrar el elemento <?= $muestra['nombre'] ?>?
                </div>
                <div class='modal-footer'>
                    <button type='button' class='btn btn-secondary' data-bs-dismiss='modal'>No</button>
                    <a href='del.php?id=<?= $muestra['id'] ?>' class='btn btn-danger'>Sí</a>
                </div>
            </div>
        </div>
    </div>
<?php endforeach; ?>

此方案会生成大量重复模态框代码，冗余且低效，优先推荐第一种方案。

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