创建/增加/删除节点-案例

最新推荐文章于 2022-03-13 11:18:25 发布

吃肉肉的半个人

最新推荐文章于 2022-03-13 11:18:25 发布

阅读量157

点赞数

分类专栏：前端练习

本文链接：https://blog.csdn.net/qq_45579661/article/details/120306813

版权

JavaScript DOM操作事件处理动态添加删除元素

关键词由CSDN通过智能技术生成

前端练习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1.功能

点击"请点击"按钮 - > 添加li标签(一个随机数 + 一个"删除"按钮) - > 点击"删除"按钮 - > 删除对应的li

<!DOCTYPE html>
<html lang="zh-CN">
<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>
    <div>
        <button id="myBtn">请点击</button>
        <ul class="myUl"></ul>
    </div>
    
        <script>
            // 需求1:点击按钮 新增li li的内容随机数
            // 获取button 
            let theBtn = document.querySelector('#myBtn')
            // 定义随机数
            function rand(min,max) {
                return Math.floor(Math.random() * (max - min + 1 ) + min)
            }
            // 绑定点击事件
            theBtn.addEventListener('click',function() {
                // 新建li
                let theLi = document.createElement('li')
                theLi.innerHTML = `
                    <span>${rand(0,100)}</span>
                    <button class="li_del">删除</button>
                `
                // 把li插入ul容器里
                let theUl = document.querySelector('.myUl')
                theUl.appendChild(theLi)
              

                // 需求2:点击删除按钮 删除对应li
                // 删除语法:父标签对象.removeChild(子标签对象)
                let delBtn = document.querySelectorAll('.li_del')
                for (let i = 0; i < delBtn.length; i++) {
                    delBtn[i].onclick = function(){//防止addEventListener多次触发,保证每个删除按钮只有一个方法
                        // this:点击目标(删除按钮)
                        let theLi = this.parentNode //要删除的li
                        theLi.parentNode.removeChild(theLi)
                    }
                }
            })
        </script>
    
</body>
</html>