JavaScript中ChipTagBody数据移除异常：调用removeAuditPeriod()后UI仍显示数据

看起来你调用removeAuditPeriod()后，UI上的审核周期标签还是没消失对吧？咱们从几个常见的问题点入手排查：

1. 元素ID生成有语法错误 #

你当前写的<span id=Period'+idRow+'是混合了JSP和JS的错误写法，导致渲染出来的ID根本不是你想要的（可能是字面量Period'+idRow+'），JS自然找不到要删除的元素。

改成JSP EL表达式拼接的正确写法：

<c:set var="idRow" value="${auditPeriod.auditPeriodId}" /> 
<span id="Period${idRow}" class="ChipTagBody">
  <span class="ChipTagContent">
    <a onclick="removeAuditPeriod(${idRow})" class="ChipTagClose" role="presentation">×</a>
    <c:out value="${auditPeriod.auditPeriodFrom} - ${auditPeriod.auditPeriodTo}"></c:out>
  </span>
</span>

这样渲染后会生成类似Period123的合法ID，和JS里的选择器对应上。

2. 检查removeAuditPeriod函数的实现 #

确保函数里正确获取并移除元素，还要记得同步后端数据（不然刷新页面数据又回来了）。比如一个标准的实现：

function removeAuditPeriod(auditPeriodId) {
  // 1. 找到要删除的标签元素
  const tagElement = document.getElementById(`Period${auditPeriodId}`);
  if (!tagElement) {
    console.error(`找不到ID为Period${auditPeriodId}的标签元素`);
    return;
  }

  // 2. 先调用后端接口删除数据（如果需要）
  // fetch(`/api/audit-periods/${auditPeriodId}`, { method: 'DELETE' })
  //   .then(response => {
  //     if (response.ok) {
  //       // 3. 接口返回成功后，从DOM移除元素
  //       tagElement.remove();
  //     } else {
  //       alert('删除失败，请重试');
  //     }
  //   })
  //   .catch(err => {
  //     console.error('删除请求出错:', err);
  //     alert('删除请求出错，请重试');
  //   });

  // 如果暂时不需要后端同步，直接移除元素
  tagElement.remove();
}

3. 确认事件参数传递正确 #

你原来的onclick="removeAuditPeriod(idRow)"里的idRow是JSP变量，必须用EL表达式${idRow}替换，否则JS会把idRow当成未定义的变量，导致函数接收不到正确的ID。

4. 用浏览器控制台排查报错 #

按F12打开开发者工具，切换到Console标签，看看有没有类似"找不到元素"、"函数未定义"的报错，这些信息能直接定位问题。

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