模态框删除表格行时ID错误，如何获取DELETE按钮对应正确ID？

问题根源 #

循环渲染时，所有模态框、按钮的ID完全重复（比如myModaldelete），document.getElementById()只会返回第一个匹配的元素，导致无论点击哪行的删除按钮，都只会调用第一行的ID和模态框，最终删错记录。

具体修改步骤 #

1. 修改HTML模板，给元素添加唯一标识 #

把循环里的模态框、按钮ID加上{{ notify.id }}后缀，同时给删除按钮加data-modal-id属性关联对应模态框：

{% for notify in notify_list %}
<tr style="vertical-align:top">
  <td class="hide">
    <!-- 模态框ID添加唯一后缀 -->
    <div id="myModaldelete-{{ notify.id }}" class="modaldelete">
      <div class="modal-content-delete">
        <!-- 保留类，去掉不必要的固定ID -->
        <span class="closedelete"></span>
        <img class="logo4" src="/static/images/threecircles.svg">
        <p>Delete Request?</p>
        <!-- Yes按钮ID加唯一后缀，value保留notify.id -->
        <button type="button" class="button165" id="yesBtndelete-{{ notify.id }}" value="{{ notify.id }}">Yes</button>
        <!-- No按钮同理，加唯一后缀 -->
        <button type="button" class="button160" id="noBtndelete-{{ notify.id }}">No</button>
      </div>
    </div>
    <!-- 给删除按钮加data-modal-id，关联对应模态框的ID后缀 -->
    <button type="button" class="button114" data-modal-id="{{ notify.id }}">
      <div class="txtalgn114"><h2 class="txtalgn114a">Delete</h2></div>
    </button>
  </td>
</tr>
{% endfor %}

2. 修改JavaScript逻辑，动态处理对应模态框 #

去掉原来固定获取单个元素的代码，改用事件委托和动态查找：

// 点击删除按钮，显示对应模态框
$(document).on('click', '.button114', function(e) {
  e.preventDefault();
  // 从data属性拿到模态框ID后缀
  const modalId = $(this).data('modal-id');
  // 找到对应的模态框并显示
  $(`#myModaldelete-${modalId}`).css('display', 'block');
});

// 点击模态框内的关闭按钮（span），关闭当前模态框
$(document).on('click', '.closedelete', function(e) {
  e.preventDefault();
  // 向上查找最近的模态框元素并隐藏
  $(this).closest('.modaldelete').css('display', 'none');
});

// 点击No按钮，关闭当前模态框
$(document).on('click', '.button160', function(e) {
  e.preventDefault();
  $(this).closest('.modaldelete').css('display', 'none');
});

// 点击模态框外部背景，关闭模态框
$(document).on('click', '.modaldelete', function(e) {
  // 确保点击的是模态框背景而非内部内容
  if (e.target === this) {
    $(this).css('display', 'none');
  }
});

// 点击Yes按钮，执行删除跳转
$(document).on('click', '.button165', function(e) {
  e.preventDefault();
  const id = $(this).val();
  window.location.href = `/url/${id}`;
});

关键说明 #

• 用{{ notify.id }}给每个元素生成唯一ID，彻底避免ID重复问题
• 通过data-modal-id关联删除按钮和对应模态框，实现点击哪行就触发哪行的模态框
• 用closest('.modaldelete')从点击的按钮向上查找最近的模态框，不再依赖固定ID
• 所有事件通过事件委托绑定在document上，确保动态生成的元素也能正常触发事件

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