如何在删除任意表单后动态更新表单标签序号

你当前的代码仅实现了隐藏对应表单的功能，没有处理删除后后续表单标签自动重命名的逻辑。下面是优化后的实现方案：

改进后的HTML代码 #

给所有表单容器统一添加form-item类，简化选择逻辑，不用给每个元素单独设置唯一id和class：

<div class="form-item">
  <label>form 1</label>
  <button onclick="deleteForm(this.parentElement)">Delete</button>
</div>
<div class="form-item">
  <label>form 2</label>
  <button onclick="deleteForm(this.parentElement)">Delete</button>
</div>
<div class="form-item">
  <label>form 3</label>
  <button onclick="deleteForm(this.parentElement)">Delete</button>
</div>
<div class="form-item">
  <label>form 4</label>
  <button onclick="deleteForm(this.parentElement)">Delete</button>
</div>

改进后的JS代码 #

写一个通用的删除函数，隐藏当前表单后，遍历所有可见的表单容器，按顺序更新标签文本：

function deleteForm(formElement) {
  // 隐藏当前表单
  formElement.style.display = 'none';
  
  // 获取所有可见的表单容器
  const visibleForms = document.querySelectorAll('.form-item:not([style*="display: none"])');
  
  // 遍历并更新标签
  visibleForms.forEach((form, index) => {
    const label = form.querySelector('label');
    label.textContent = `form ${index + 1}`;
  });
}

逻辑说明 #

• 点击删除按钮时，把当前表单容器传入删除函数，直接隐藏它
• 用querySelectorAll筛选出所有还显示的表单容器
• 按遍历顺序给每个表单的标签设置新的序号，序号从1开始递增

这样不管删除哪一个表单，剩下的表单标签都会自动按顺序重新命名，完全符合你的需求。

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