JQuery-Javascript：隐藏输入框删值后新增出现重复问题

听起来你遇到了一个典型的变量与DOM值不同步导致的重复问题，核心原因大概率是你的attachmentsids变量和隐藏输入框的value没有在删除/添加操作中保持一致，或者添加时没做去重处理。我来给你拆解下解决方案：

1. 先排查你的删除逻辑 #

很多时候出现这种重复，是因为删除操作只清空了隐藏输入框的value，但attachmentsids变量还保留着之前的ID值。比如你可能写了类似这样的错误代码：

// 错误示例：只清空了input，但变量没更新
document.getElementById('attachmentsInput').value = '';
// 但attachmentsids还是原来的数组/字符串

下次添加时，代码又把旧的attachmentsids和新ID拼接，自然就出现了重复。

修正方式：删除时必须同步更新attachmentsids变量，比如用数组存储ID的话，要过滤掉被删除的项：

// 假设attachmentsids是数组类型
function removeAttachment(targetId) {
  // 过滤掉要删除的ID
  attachmentsids = attachmentsids.filter(id => id !== targetId);
  // 同步更新隐藏输入框的value
  document.getElementById('attachmentsInput').value = attachmentsids.join(',');
}

2. 添加操作必须做去重检查 #

不管删除逻辑有没有问题，添加新ID时都要先检查这个ID是否已经存在于attachmentsids中，避免重复追加。比如：

function addAttachment(newId) {
  // 先判断ID是否已存在
  if (!attachmentsids.includes(newId)) {
    attachmentsids.push(newId);
    // 同步到隐藏输入框
    document.getElementById('attachmentsInput').value = attachmentsids.join(',');
  }
}

3. 统一用数组管理ID（推荐） #

别用字符串直接拼接ID！字符串操作很容易出现重复、多余逗号等问题，改用数组存储所有附件ID，每次操作后转成逗号分隔的字符串赋值给隐藏输入框，这样逻辑更清晰，也更容易维护。

举个完整的小例子：

<!-- 隐藏输入框 -->
<input type="hidden" id="attachmentsInput" name="attachmentsids">

<script>
// 初始化数组存储ID
let attachmentsids = [];

// 添加附件
function addAttachment(id) {
  if (!attachmentsids.includes(id)) {
    attachmentsids.push(id);
    updateHiddenInput();
  }
}

// 删除附件
function removeAttachment(id) {
  attachmentsids = attachmentsids.filter(item => item !== id);
  updateHiddenInput();
}

// 统一更新隐藏输入框的函数
function updateHiddenInput() {
  document.getElementById('attachmentsInput').value = attachmentsids.join(',');
}
</script>

按照这个逻辑改造后，你再测试删除→添加→删除→添加的流程，应该就不会出现value重复的问题了。

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