DOM练习

list新增与删除

<!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>
    <button onclick="add()">新增 li</button>
    <ul>
        <li>li1 <a href="javascript:;">删除</a></li>
        <li>li2 <a href="javascript:;">删除</a></li>
        <li>li3 <a href="javascript:;">删除</a></li>
        <li>li4 <a href="javascript:;">删除</a></li>
    </ul>
    <script>
        const ul = document.querySelector("ul")
        ul.onclick = event => {
            console.log(event.target.nodeName);
            if (event.target.nodeName === 'A') {
                console.log(event.target.parentNode);
                event.target.parentNode.remove()
            }
        }
        function add() {
            const li = document.createElement('li')
            const a = document.createElement('a')
            a.innerText = "删除"
            a.href = 'javascript:;'
            li.innerText = `li 新增`
            li.append(a)
            ul.append(li)
        }
    </script>
</body>

</html>
posted @ 2021-11-29 11:36  走我们钓鱼去  阅读(48)  评论(0)    收藏  举报