Hàm append và remove trong jquery

Jquery là thư việc của javascript. Nó cho phép lập trình viên viết code ngắn gọn và dễ hiểu hơn, cùng với sự tiện lợi mà các hàm do jquery tạo ra thì chúng ta có thể tạo các sự kiện và hiệu ứng sinh động và hấp dẫn. Hôm nay mình xin được phép hướng dẫn về cách sử dụng cơ bản hai hàm đó là appendremove. Hai hàm này có ứng dụng trong thực tiễn rất nhiều, kể cả front-end lẫn back-end, ví dụ như bạn làm chức năng upload nhiều ảnh cho sản phẩm hoặc bài viết, khi mà số ảnh là do khách hàng tự thêm vào, hoặc bạn làm chức năng comment thì hàm append cũng trợ giúp bạn rất nhiều.

Ở trong video mình có đề cập đến method: prevenDefault(). đây là phương thức để ngăn cản hành vi mặc định của sự kiện, nó cũng gần giống return false. Các bạn có thể tự tìm hiểu sự khác nhau của hai hàm này. Nó cũng không khác nhau nhiều lắm đâu. chúc các bạn học tốt.

code toàn bộ bài này:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <style>
        .delete{
            border: 1px solid #454545;
            padding:4px 4px;
            text-decoration: none;
            background: #CCCCFF;
            margin-left: 5px;
        }
        .img{
            width:100px;
            height: 60px;
            margin-bottom: -10px;
        }

    </style>
</head>
<body>
    <ul class="file_images">

    </ul>
    
    <span>
        Add File:
        <a class="addfile" href="http://phongdat.com" target="_blank"><img class="img" src="http://www.clker.com/cliparts/J/N/5/l/n/k/add-button-blue-hi.png" alt=""></a>
    </span>


    <script type="text/javascript">
        $(document).ready(function(){

            var max_file =5;
            var x =1;
            $(".addfile").click(function(e){
                e.preventDefault();
                if(x <= max_file)
                {
                    x++;
                    $(".file_images").append('<li><input type="file"><a href="" class="delete">delete</a></li>');
                }else{
                    alert('bạn chỉ upload tối đa được 5 file');
                }
            });

            $(".file_images").on('click','.delete',function(e){
               e.preventDefault();
               $(this).parent().remove();x--;
            });

        })
    </script>
</body>
</html>
  • Tác giả: Admin
  • 30/07/2017
Bài viêt khác