如何不使用jQuery，用原生JavaScript实现元素创建与删除功能

以下是完全等效的原生JavaScript实现代码，无需依赖任何第三方库：

document.addEventListener('DOMContentLoaded', function() {
  // 事件委托绑定点击事件，兼容动态生成的add more按钮
  document.addEventListener('click', function(e) {
    // 仅响应btn-copy类的按钮点击
    if (!e.target.classList.contains('btn-copy')) return
    e.preventDefault()

    // 获取当前按钮所属的.example-2容器
    const originContainer = e.target.closest('.example-2')
    // 深克隆容器（包含子节点和绑定的内联事件）
    const clonedContainer = originContainer.cloneNode(true)
    // 清空克隆容器内的输入框值
    clonedContainer.querySelector('input').value = ''

    // 检查克隆容器是否已有删除按钮，没有则新增
    const buttonList = clonedContainer.querySelectorAll('button')
    if (buttonList.length < 2) {
      const deleteBtn = document.createElement('button')
      deleteBtn.textContent = 'Delete'
      deleteBtn.addEventListener('click', function(ev) {
        ev.preventDefault()
        clonedContainer.remove()
      })
      clonedContainer.appendChild(deleteBtn)
    }

    // 将克隆容器插入到原容器后方
    originContainer.after(clonedContainer)
  })
})

核心替换逻辑说明 #

• 原jQuery的$(function(){})DOM加载监听替换为原生DOMContentLoaded事件监听
• 采用事件委托绑定点击事件，不需要重复给动态新增的add more按钮绑定事件，性能更优
• 原生Element.closest()方法完全替代jQuery的$.closest()，功能一致
• 原生Node.cloneNode(true)替代jQuery的$.clone(true)实现深克隆
• 原生querySelector/querySelectorAll替代jQuery的元素选择器
• 原生Element.after()替代jQuery的$.after()实现元素插入

如果需要兼容极低版本浏览器，可以将originContainer.after(clonedContainer)替换为以下代码：

originContainer.parentNode.insertBefore(clonedContainer, originContainer.nextSibling)

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