练习-带有删除的留言

最新推荐文章于 2024-08-19 17:25:32 发布

奋斗中的切图猿

最新推荐文章于 2024-08-19 17:25:32 发布

阅读量54

点赞数

分类专栏： js练习题文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44573096/article/details/107386100

版权

js练习题专栏收录该内容

28 篇文章 0 订阅

订阅专栏

效果：
在这里插入图片描述代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="text"/>
    <button>发送</button>
    <ul>
        <!-- <li>我是一段留言。<button>撤回</button></li> -->
    </ul>
    <script>
    var oTe = document.getElementsByTagName("input")[0];
    var oBtn = document.getElementsByTagName("button")[0];
    var oUl = document.getElementsByTagName("ul")[0];
    // 方法一：
    // var aBtn = oUl.getElementsByTagName("button");    //获取的是ul下的li
    // oBtn.onclick = function (){
    //     oUl.innerHTML += "<li>"+oTe.value+"<button>撤回</button></li>";
    //     for(var i=0;i<aBtn.length;i++){
    //         aBtn[i].onclick = function (){   //点击某个按钮时，它的父元素li会被删除
    //             oUl.removeChild(this.parentNode);
    //         }
    //     }
    // }
    // 方法二：
    oBtn.onclick = function (){
        var oLi = document.createElement("li");
        oLi.innerHTML = oTe.value;
        var oBtn = document.createElement("button");
        oBtn.innerHTML = "撤回";
        oBtn.onclick = function (){
            oUl.removeChild(this.parentNode);
        }
        oLi.appendChild(oBtn);
        oUl.appendChild(oLi);
    }
    </script>
</body>
</html>