动态创建50个 li 标签，并且给 li 添加删除功能创建标签使用了document.createElement()方法

创建标签使用了document.createElement()方法

添加删除功能使用了事件代理，没有给每一个 li 添加事件，而是给 ul 添加事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let ulList = document.createElement('ul')
        //创建一个文档碎片，减少DOM渲染次数
        let fragment = document.createDocumentFragment()
        for (i = 0; i < 50; i++) {
            let liItem = document.createElement('li')
            liItem.innerHTML = `这是第${i + 1}项&nbsp;&nbsp;<button>删除</button>`
            fragment.appendChild(liItem)
        }
        ulList.appendChild(fragment)
        document.body.appendChild(ulList)
		
		//给ul标签添加事件监听
        ulList.addEventListener('click', removeItem)
        function removeItem(e){
            const target = e.target
            const targetName = target.tagName.toLowerCase()
            if(targetName === 'button'){
                target.parentNode.remove()
            }
        }
    </script>
</body>
</html>