如何实现点击元素时动态增删对应[values][]的隐藏输入框

核心逻辑是点击元素时根据active类的状态，对应创建或删除匹配的hidden input，彻底避免重复生成。以下是修正后的代码：

// 给所有带data-value的span绑定点击事件
document.querySelectorAll('span[data-value]').forEach(span => {
  span.addEventListener('click', function() {
    // 切换active类
    this.classList.toggle('active');
    const targetValue = this.dataset.value;
    const form = this.closest('form'); // 定位当前元素所在的表单
    if (!form) return;

    // 精准查找对应value的hidden input
    const existingInput = form.querySelector(`input[type="hidden"][name="values[]"][value="${targetValue}"]`);

    if (this.classList.contains('active')) {
      // 新增active类时，仅当无对应input才创建
      if (!existingInput) {
        const input = document.createElement('input');
        input.type = 'hidden';
        input.name = 'values[]';
        input.value = targetValue;
        // 可选：添加自定义属性，方便后续更可靠地查找
        input.dataset.matchValue = targetValue;
        form.appendChild(input);
      }
    } else {
      // 移除active类时，删除对应input
      if (existingInput) {
        existingInput.remove();
      }
    }
  });
});

关键细节说明 #

• 用closest('form')确保input插入到正确的表单容器，避免全局查找的混乱
• 查找input时同时匹配name="values[]"和value，精准定位对应项
• 新增了!existingInput的判断，从根源上杜绝重复创建
• 如果你的data-value包含引号、斜杠等特殊字符，改用自定义属性data-matchValue查找更稳妥：

// 创建时添加自定义属性
input.dataset.matchValue = targetValue;
// 查找时替换为
const existingInput = form.querySelector(`input[type="hidden"][name="values[]"][data-matchValue="${targetValue}"]`);

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