周四的学习

最新推荐文章于 2023-12-11 10:23:59 发布

张张的宝藏

最新推荐文章于 2023-12-11 10:23:59 发布

阅读量42

点赞数

本文链接：https://blog.csdn.net/m0_56426996/article/details/117807373

版权

列表增添删除

<!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>任务列表的信息添加和删除</title>
    <style>
        h2{
            text-align: center;
            color: cornsilk;
            vertical-align: auto;
        }
        #bg{
            height: 150px;
            width: auto;
            background-color: cornflowerblue;
        }
        #in_put{
            margin-left: 10px;
            width: 800px;
            height: 25px;
        }
        #bt{
            width: 100px;
            height: 30px;
        }
        li{
            width: auto;
            height: 50px;
            list-style: none;
        }
        .ID{
            margin-left: 99%;
        }
    </style>
</head>
<body>
    <div id="bg">
        <div id="head"><h2>我的任务列表</h2><br></div>
        <input type="text" id="in_put" placeholder="Task...">
        <input type="button" id="bt" value="添加任务" onclick="add()">
    </div>
    <div>
        <ul id="li_list">
            <li id="li1"><span>学习HTML基本元素</span> <input type="button" class="ID" value="x" onclick="del('li1')"></li>
            <li id="li2"><span>练习css布局编写</span><input type="button" class="ID" value="x" onclick="del('li2')"></li>
            <li id="li3"><span>完成登录页面编写</span><input type="button" class="ID" value="x" onclick="del('li3')"></li>
            <li id="li4"><span>提交已经完成的所有任务</span><input type="button" class="ID" value="x" onclick="del('li4')"></li>
        </ul>
    </div>
    <script>
        function del(lis){
            var e = document.getElementById(lis)
            e.remove()
        }
        var n = 5
        function add(){
            var li_id = "li"+n
            var add_text = document.getElementById("in_put").value
            if(add_text.length==0){
                alert("请输入内容")
            }else{
                document.getElementById("li_list").innerHTML+="<li id="+li_id+"><span>"+add_text+"</span><input type=\"button\" class=\"ID\" value=\"x\" onclick=\"del(\'"+li_id+"\')\"></li>"
                document.getElementById("in_put").value=null
                n++
            }
        }
    </script>
</body>
</html>