Love beautiful code? We do too.

  1. Home
  2. Tutorial
  3. Hàm jQuery
  4. .detach() trong jQuery
Previous Lesson Next Lesson

.detach() trong jQuery

Định nghĩa và sử dụng .detach() trong jQuery

.detach(): Loại bỏ các phần tử xuất hiện từ DOM. .detach() được sử dụng tương tự như .remove(), tuy nhiên .detach() sẽ giữ lại tất cả các dữ liệu jQuery kết hợp với loại bỏ thành phần, phương pháp này sẽ hữu dụng khi thành phần được loại bỏ và thêm vào DOM sau một thời gian.

Cấu trúc .detach() trong jQuery

Đã được thêm vào từ phiên bản 1.4

.detach()
----------------------------------------------------------------------------------------
$('p').detach();

.detach()

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
.yellow { background-color: yellow; }
.blue { background-color: blue; }
</style>
<script>
$(function(){
     $("div").click(function(){
          $(this).toggleClass("blue");
     });

    var div;

    $('.removeToggle').click(function(){
        if ( div ) {
            div.appendTo("body");
            div = null;
        } else {
            div = $("div").remove();
        }
    });

    $('.detachToggle').click(function(){
        if ( div ) {
            div.appendTo("body");
            div = null;
        } else {
            div = $("div").detach();
        }
    });
});
</script>
</head>

<body>
<div class="yellow">Thành phần div</div>
<button class="removeToggle">remove toggle</button>
<button class="detachToggle">detach toggle</button>
</body>
</html>

Hiển thị trình duyệt:

Ví dụ trên ta có thể dễ dàng so sánh 2 phương pháp .remove() và .detach():

  • Khi ta thực hiện bằng phương pháp .remove(), ta không thể nào giữ lại dữ liệu của .toggleClass("blue"). Kiểm tra bằng cách click 2 lần vào button "remove toggle" và sau đó click vào thành phần div (vùng màu vàng) sẽ không có hành động nào tiếp theo (dữ liệu không được giữ lại).
  • Khi ta thực hiện bằng phương pháp .detach(), ta vẫn giữ lại dữ liệu của .toggleClass("blue"). Kiểm tra bằng cách click 2 lần vào button "detach toggle" và sau đó click vào thành phần div (vùng màu vàng) sẽ tiếp tục toggle class giữa "yellow" và "blue" (dữ liệu được giữ lại).
    • chú ý là nếu ta click vào button "remove toggle" trước thì dữ liệu đã bị loại bỏ nên lần thứ 2 click vào button "detach toggle" sẽ không còn dữ liệu nữa (không thể sử dụng toggleClass).
Previous Lesson Next Lesson

Viết câu trả lời

Drop Images

0 Bình luận

Danh mục bài học

Hoclaptrinh.vn © 2017

From Coder With