js 创建和删除元素_js 创建的元素如何删除-CSDN博客

本文链接：https://blog.csdn.net/qq_42467563/article/details/83305092

<html>
   <head>
       <meta charset="utf-8" />
       <title>创建与删除</title>
   </head>
   <body>
       <input type="file" /><button>添加</button>
   </body>
   <script>
       var btn = document.getElementsByTagName('button')[0]

       btn.onclick = function () {
           // 创建一个div
           var div = document.createElement('div')
           // 创建一个input
           var input = document.createElement('input')
           input.type = 'file'
           // 将input添加到div中
           div.appendChild(input)
           // 创建一个按钮
           var button = document.createElement('button')
           button.innerText = '删除'
           button.onclick = function () {
               // 找到父级元素
               var parent = this.parentNode
               // 找到祖父级元素
               var grand = parent.parentNode
               // 删除父级元素
               grand.removeChild(parent)
           }
           // 将button添加到div中
           div.appendChild(button)
           // 将div添加到文档中
           btn.parentNode.appendChild(div)
       }
   </script>
</html>