原生JavaScript中如何删除cloneNode()创建的标签页？

代码无法生效核心是4个问题：

• 违反ID唯一性规则：模板里的closeBtn、recipient都是固定ID，页面出现多个同ID元素时，getElementById永远只会匹配第一个元素，你给关闭按钮加动态class的操作只会改到第一个表单的关闭按钮，克隆生成的新表单关闭按钮根本没有对应标识
• 事件委托绑定的目标不存在：删除事件绑定到了页面里不存在的.container元素上，点击时根本不会触发绑定逻辑
• 克隆逻辑有副作用：每次点击加号都会修改原始第一个表单的类名，多次点击后原始表单结构会被改乱
• 删除逻辑冗余：不需要靠动态拼接类名查找要删除的元素，点击关闭按钮时可以直接定位到它所属的表单元素，直接删除即可

<!-- 把原模板里的重复ID全部改成class，符合页面ID唯一规则 -->
<form class="secondSectionEmail"> 
 <button class="close-btn">x</button>
 <input type="email" class="recipient" placeholder="Enter Recipient Email">
 <input type="text" placeholder="Subject"><br>
  <textarea placeholder="Enter Message"></textarea>
    <div class="upload">
        <input type="file" multiple>
        <button type="button">Send Mail</button>
    </div>
 </form>
<br>
<br>
<button type="button" id="arrow">+</button>

<script>
// 新增标签页逻辑
const addButton = document.getElementById("arrow");
// 取第一个表单作为克隆模板
const templateForm = document.querySelector(".secondSectionEmail");

addButton.addEventListener("click", function (e) {
  e.preventDefault();
  // 深度克隆模板
  const cloneForm = templateForm.cloneNode(true);
  // 新表单插到+按钮上方，保证新增顺序正确
  addButton.before(cloneForm);
})

// 删除标签页逻辑：事件委托绑定到全局document，动态生成的元素也能触发
document.addEventListener("click", function (event) {
  // 仅响应关闭按钮的点击
  if (event.target.classList.contains("close-btn")) {
    event.preventDefault();
    // 向上查找按钮所属的表单元素
    const targetForm = event.target.closest("form");
    // 可选判断：保留至少一个表单不被删完，不需要可以删掉这段判断
    if (document.querySelectorAll(".secondSectionEmail").length > 1) {
      targetForm.remove();
    }
  }
})
</script>

• 所有元素标识统一用class，避免重复ID导致的选择器匹配错误
• 不需要维护递增计数变量给克隆元素加动态类，固定class完全可以满足需求
• 用closest()方法直接向上查找关闭按钮对应的表单父元素，不需要靠类名拼接匹配元素，逻辑更简单可靠
• 事件委托绑定到全局document，不管是初始存在的表单，还是后续动态克隆出来的表单，上面的关闭按钮点击事件都能被捕获
• 给表单内的普通按钮加上type="button"，避免点击时意外触发表单提交刷新页面

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