动态增删HTML区块故障：删除后AddMoreRows函数无法新增区块

嘿，我一眼就瞅到问题所在啦！你当前的代码用了hasHsa3、hasHsa4、hasHsa5这类固定的布尔变量来控制新增区块，但删除操作并没有重置这些变量的状态——这就是删除后新增失效的核心原因。

举个例子：当你新增了hsa3区块，hasHsa3会被设为true；但如果你删掉这个区块，hasHsa3依然是true，下次点击新增时，代码会误以为hsa3区块还存在，自然就不会再创建了。

修复方案：用实时DOM统计替代固定变量 #

我们可以抛弃那些固定的布尔值，转而通过统计页面上已存在的目标区块数量来判断是否允许新增，这样不管增删操作，状态都是实时准确的。

1. 修改新增函数逻辑

// 移除原来的hasHsa3/4/5变量，改用实时DOM统计
function addMoreRows() {
  // 替换成你实际的区块类名或容器选择器
  const existingBlocks = document.querySelectorAll('.dynamic-block');
  const currentCount = existingBlocks.length;

  // 假设你最多允许新增到5个区块（对应你原来的需求）
  if (currentCount < 5) {
    // 这里是创建新区块的逻辑，你可以根据原有代码调整
    const newBlock = document.createElement('div');
    newBlock.className = 'dynamic-block';
    // 给每个区块加唯一标识（如果需要）
    newBlock.dataset.id = `hsa${currentCount + 3}`; 
    // 填充区块内容，包含删除按钮
    newBlock.innerHTML = `
      <div class="block-content">
        <!-- 这里放你原来的区块内部元素，比如输入框、标签等 -->
        <input type="text" placeholder="区块 ${currentCount + 3}">
        <button onclick="deleteRow(this)">删除</button>
      </div>
    `;
    // 把新区块添加到容器里（替换成你实际的容器ID）
    document.getElementById('block-container').appendChild(newBlock);
  } else {
    alert('最多只能添加5个区块哦！');
  }
}

2. 简化删除函数

删除操作只需要移除对应的DOM元素即可，不需要修改任何变量：

function deleteRow(button) {
  // 找到按钮所在的父级区块并移除
  const blockToDelete = button.closest('.dynamic-block');
  if (blockToDelete) {
    blockToDelete.remove();
  }
}

为什么这个方案可行？ #

• 实时统计DOM数量能准确反映当前页面的区块状态，不管是新增还是删除，数量都会即时更新。
• 不再依赖外部变量的状态，避免了“变量状态与实际DOM不一致”的问题。

如果你的原有区块有特殊的结构或标识，只需要调整选择器和区块内容的生成逻辑就行啦～

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