如何使用JavaScript删除HTML中带递增ID的动态生成元素

现有代码核心问题 #

• 每次触发update函数时counter都被重置为0，导致按钮onclick绑定的参数永远是tag0，和后续遍历修改的标签ID不匹配
• 删除逻辑仅清空了元素内容，没有真正将标签节点从DOM中移除
• 所有新增的删除按钮都使用了重复的id="delete"，违反DOM ID唯一规范
• 下拉框选中后不会重置为默认选项，重复选择同一选项无法触发新增逻辑

修正后完整代码 #

JavaScript 部分 #

// 全局存储当前标签序号，避免每次重置
let tagCounter = 0;

function update() {
  const selObj = document.getElementById("skill_tags");
  // 未选中有效选项直接返回
  if (selObj.selectedIndex === 0) return;
  const selVal = selObj.options[selObj.selectedIndex].text;
  // 序号自增保证ID唯一
  tagCounter++;
  const tagId = "tag" + tagCounter;
  
  // 拼接HTML时直接绑定正确的ID
  document.getElementById("textarea").innerHTML += `
    <div class='tags_inline' id='${tagId}'>
      <li class='list-inline-item'>
        <span class='badge badge-dark'>
          ${selVal}
          <button class='fa fa-times-circle text-white' onclick="remove_tag('${tagId}')"></button>
        </span>
      </li>
    </div>
  `;
  
  // 重置下拉框为默认选项，支持重复选择同一选项
  selObj.selectedIndex = 0;
}

function remove_tag(id) {
  const targetTag = document.getElementById(id);
  if (targetTag) {
    // 直接从DOM中移除目标标签节点
    targetTag.remove();
  }
}

HTML 部分（无需大幅修改） #

<div class="resume-skill-item">
  <h5>
    <ul class="list-inline">
      <div align="right">
        <select id="skill_tags" onchange="update()">
          <option selected="true" disabled="disabled">*Select All That Applies</option>
          <option value="mechanic">Mechanic</option>
          <option value="appliance_repairer">Appliance Repairer</option>
          <option value="carpenter">Carpenter</option>
          <option value="plumber">Plumber</option>
          <option value="technician">Technician</option>
        </select>
      </div>
    </ul>
    <div id="textarea" class="large-single-textarea">
    </div>
  </h5>
</div>

关键改动说明 #

• 把标签计数器tagCounter放到函数外部作为全局变量，每次新增标签自动递增，保证ID唯一
• 拼接新增标签HTML时直接传入生成好的正确ID，不需要后续遍历修改所有标签ID，简化逻辑提升性能
• 删除逻辑改用remove()方法直接移除目标DOM节点，而非仅清空内容
• 新增标签后自动重置下拉框选中状态，支持重复选择同一选项
• 移除了重复的删除按钮ID，避免DOM规范冲突

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