JavaScript动态创建div如何正确传递元素参数解决取值异常问题

• 所有动态生成的input元素共用了同一个id alarmTime，HTML规范要求id必须全局唯一，因此document.getElementById('alarmTime')永远只会返回页面中第一个匹配该id的元素，这是每次拿到第一个值的核心原因
• 原有代码中onclick绑定的函数存在语法错误，多余的{符号会导致触发点击时先报语法错误

这里提供两种可行的修改方案，按需选择即可：

方案1：直接传入已有的alarmTime变量（最简单） #

你在模板字符串中已经可以直接拿到当前行的alarmTime值，不需要额外查询DOM获取，直接作为参数传入函数即可：

动态创建div的代码修改 #

const div = document.createElement('div');
div.className = 'row';
div.innerHTML = `
  <span> ${alarmName} </span>
  <br>
  <label for="name"> Time = </label>
  <!-- 这里可以去掉id属性，避免id重复问题 -->
  <input type="text" name="name" value="${alarmTime}" disabled />
  <!-- 直接把alarmTime作为参数传入，修复语法错误 -->
  <button class="buttonClass" onclick="removeRowThis(this, '${alarmTime}')"> delete </button>
`;

函数修改 #

function removeRowThis(input: HTMLElement, value: string) {
  // 直接移除当前行，写法更简洁，兼容所有现代浏览器
  input.parentNode?.remove();
  // 如果你需要保留原有父容器删除逻辑，也可以继续使用：
  // (document.getElementById('alarm2') as HTMLElement).removeChild(input.parentNode);
  alert(value);
}

注意：如果alarmTime可能包含单引号，需要提前做转义处理，避免字符串提前闭合导致语法错误。

方案2：通过节点关系查找对应输入框（适合允许修改输入值的场景） #

如果你后续可能放开输入框的disabled限制，允许用户修改时间，那可以通过当前按钮的父节点查找对应输入框，不需要依赖id或者提前传值：

动态创建div的代码修改 #

const div = document.createElement('div');
div.className = 'row';
div.innerHTML = `
  <span> ${alarmName} </span>
  <br>
  <label for="name"> Time = </label>
  <input type="text" name="name" value="${alarmTime}" disabled />
  <!-- 只需要传当前按钮实例 -->
  <button class="buttonClass" onclick="removeRowThis(this)"> delete </button>
`;

函数修改 #

function removeRowThis(input: HTMLElement) {
  const row = input.parentNode as HTMLElement;
  // 查找当前行内的输入框，永远只匹配当前行的元素，不会找错
  const timeInput = row.querySelector('input[type="text"]') as HTMLInputElement;
  const value = timeInput.value;
  row.remove();
  alert(value);
}

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