对吗？是否有待优化

来源：4-24 项目作业

张小阳_

2022-07-10 13:26:57

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
</head>

<body>
    <input type="text" class="textInput">
    <button id="btn">添加</button>
    <ul class="list">
        <li class="li">吃饭</li>
        <li class="li">睡觉</li>
        <li class="li">打豆豆</li>
    </ul>
    <script>
        // 获取元素
        var textInput = document.querySelector(".textInput");
        var btn = document.querySelector("#btn");
        var list = document.querySelector(".list");
        var li = document.querySelectorAll(".li");
        // 给按钮绑定点击事件
        btn.onclick = function () {
            var li = document.createElement("li")
            li.className = "li"
            li.innerHTML = textInput.value;
            list.appendChild(li)
            textInput.value = ""
        }
        // 给li绑定点击事件
        // for (var i = 0; i < li.length; i++) {
        //     li[i].onclick = function () {
        //         list.removeChild(this)
        //     }
        // }
        list.onclick = function (e) {
            list.removeChild(e.target);
        };

    </script>
</body>

</html>

写回答

1回答