index2 final

<html>
    <head>
        <title>JQuery add element</title>
        <style>
            .container{
                width:100%;
                height:auto;
            }
            .kotak{
                width:50px;
                height:50px;
                border: 1px solid black;
                background-color:red;
                margin:10px;
                position:relative;
                display:inline-block;
            }
        </style>
    </head>
    <body>

        <input type="button" value="add" id="buttonAdd">
        <div class="container">

        </div>

        

        <script src="10680_library JQuery  - jQuery v3.6.1.js"></script>
        <script>
            $(document).ready(function(){
                //variable
                let addBtn = $("#buttonAdd");
                let container = $(".container");

                //function

                function addBox(){
                    // let newDiv = "<div class='kotak'></div>";
                    // container.append(newDiv);
                    
                    // $(".kotak").click(function(){
                    //     $(this).fadeOut();
                    // });


                    $("<div/>",{
                        text:"ini div",
                        class:"kotak",
                        on:{
                            click:function(){

                                var target = $(this);

                                target.animate({
                                    opacity:0.25,
                                    left:'+=200px',
                                    top:'+=200px'
                                },1000,function(){
                                    // Animation Complete
                                    target.animate({left:'-=200px'},500)
                                    target.animate({top:'-=200px'},500)
                                    target.fadeOut();


                                });
                                //$(this).fadeOut();
                            }
                        },
                        appendTo:container
                    });

                }

                //event listener

                addBtn.click(function(){
                    addBox();
                })
                
            })
        </script>
    </body>
</html>
Editor is loading...