如何删除由onClick事件复制的Div元素？单选No时清除所有副本

核心思路 #

给所有通过duplicate()生成的副本元素加一个统一类名（比如duplicated-item），选中“No”时直接批量删除带这个类的元素，不用逐个处理id，操作更简洁高效。

具体实现代码 #

HTML 部分

<!-- 单选按钮组 -->
<label>
  <input type="radio" name="option" value="yes" id="option-1"> Yes
</label>
<label>
  <input type="radio" name="option" value="no" id="option-2"> No
</label>

<!-- 原始表单Div -->
<div id="ifYes" style="display: none;">
  <input type="text" placeholder="输入内容">
  <!-- 其他表单元素 -->
</div>

<button id="addItemBtn" style="display: none;">Add Item</button>

JavaScript 部分

let copyCount = 0;

// 监听单选按钮切换事件
document.querySelectorAll('input[name="option"]').forEach(radio => {
  radio.addEventListener('change', function() {
    const originalDiv = document.getElementById('ifYes');
    const addBtn = document.getElementById('addItemBtn');
    
    if (this.value === 'yes') {
      // 显示原始Div和添加按钮
      originalDiv.style.display = 'block';
      addBtn.style.display = 'block';
    } else {
      // 隐藏原始Div，删除所有副本
      originalDiv.style.display = 'none';
      addBtn.style.display = 'none';
      // 批量移除所有带duplicated-item类的副本
      document.querySelectorAll('.duplicated-item').forEach(item => item.remove());
      // 重置计数，避免下次复制时id重复
      copyCount = 0;
    }
  });
});

// 复制元素的函数
function duplicate() {
  copyCount++;
  const original = document.getElementById('ifYes');
  // 深克隆原始元素（包含所有子元素）
  const clone = original.cloneNode(true);
  // 给副本设置新id（可选，按需保留）
  clone.id = `ifYes${copyCount}`;
  // 标记副本类名，用于后续批量删除
  clone.classList.add('duplicated-item');
  // 将副本插入到原始Div之后、添加按钮之前
  original.parentNode.insertBefore(clone, document.getElementById('addItemBtn'));
}

// 绑定添加按钮的点击事件
document.getElementById('addItemBtn').addEventListener('click', duplicate);

关键说明 #

• 用类名标记副本，比遍历id更高效，也避免了id命名冲突的问题。
• 选中“No”时，通过document.querySelectorAll('.duplicated-item')一键选中所有副本，调用remove()直接删除。
• 重置copyCount是为了下次切换回“Yes”时，副本id能从1重新开始，保证id唯一性。

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