调用removeChild删除DOM元素失效，切换站点参数时旧内容未被清除问题

问题根因 #

1. 首先是replaceChildAPI用法错误：原生DOM的replaceChild方法要求传入两个参数，格式为父元素.replaceChild(新节点, 要被替换的旧节点)，你的代码只传了一个参数，直接触发异常进入catch分支，后续所有删除旧元素的逻辑都没有执行。
2. 其次是删除逻辑的遍历规则错误：你现在是遍历当前点击站点的data.parlist来查找要删除的旧元素，如果站点1和站点2的参数ID不重合，你根本遍历不到站点1的旧参数ID，就算前面的异常修复了，也删不掉站点1的遗留内容。

解决方案 #

最优方案（推荐） #

直接清空整个承载参数的父容器，不需要逐个查找删除，稳定性最高，只需要在渲染新参数之前加一行代码即可：

// 放在你渲染新参数的for循环之前，直接清空所有旧内容
myDiv.innerHTML = '';

// 后面接你原来的创建元素、渲染新参数的逻辑
for (var i=0;i<data.parlist.length;i++){
  // 原有创建input、label、插入节点的逻辑不变
}

适配原有逻辑的修复方案 #

如果你需要保留逐个删除的逻辑，做以下修改：

1. 先删掉或修正错误的replaceChild调用：如果不需要替换节点直接删除这行代码即可。
2. 给所有生成的参数DOM元素增加统一的类名标记，避免按站点ID遍历删除的问题：

// 你创建参数容器的时候加统一类名
var subDiv = document.createElement("div")
subDiv.classList.add('site-param-item') // 新增这行

3. 删除的时候直接选中所有该类名的元素统一移除：

// 渲染新参数前执行
document.querySelectorAll('.site-param-item').forEach(el => {
  if(el.parentNode) el.parentNode.removeChild(el)
})

这样不管上一次加载的是哪个站点的参数，都可以全部清空，不会出现遗留。

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