待办事项 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>待办事项</title>
    <style type="text/css">
         *{
                padding: 0;
                margin: 0;
            }
    </style>
</head>
<body>

    <h1>My To-Do List</h1>
    <input type="text" placeholder="New item" />
    <button id="add">Add</button>
    <button id="sum">count</button>
    <ol id="my_list"></ol>

    <script type="text/javascript" src="jquery-3.4.1min.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#add").on("click", function() {
                var val = $("input").val();
            if(val !== '') {
            var elem = $("<li></li>").text(val);
                $(elem).append("<button class='rem'>X</button>");
                $("#my_list").append(elem);
                $("input").val("");
                $(".rem").on("click", function() {
                $(this).parent().remove();
                });
            };
        });
            $("#sum").on("click", function() {
                alert($("#my_list li").length);});
     });
    </script>
</body>
</html>

　　

posted @ 2019-07-24 16:53  张瑞桐  阅读(214)  评论(0)    收藏  举报