Làm cách nào để loại bỏ một phần tử chậm với jQuery?

179

$target.remove() có thể loại bỏ yếu tố này, nhưng bây giờ tôi muốn quá trình giảm xuống với một số cảm giác hoạt hình, làm thế nào để làm điều đó?

javascript jquery

— Mặt nạ
nguồn

355

$target.hide('slow');

hoặc là

$target.hide('slow', function(){ $target.remove(); });

để chạy hình ảnh động, sau đó loại bỏ nó khỏi DOM

— Greg
nguồn

7

Phương thức .remove () đặc biệt loại bỏ nút khỏi DOM. Phương thức. Leather () chỉ thay đổi thuộc tính hiển thị để không hiển thị, nhưng vẫn tồn tại.

— micahwittman

2

@Envil Các poster hỏi làm thế nào để loại bỏ nó từ từ. .remove () thực hiện ngay lập tức.

— pixelearth

4

@pixelearth đặt $(this).remove()bên trong chức năng gọi lại. Điều đó hoạt động tốt hơn$target.remove()

— Envil

98

target.fadeOut(300, function(){ $(this).remove();});

hoặc là

$('#target_id').fadeOut(300, function(){ $(this).remove();});

Sao y: Làm thế nào để "fadeOut" & "xóa" một div trong jQuery?

— micahwittman
nguồn

20

Nếu bạn cần ẩn và sau đó loại bỏ phần tử, hãy sử dụng phương thức remove bên trong hàm gọi lại của phương thức ẩn.

Điều này sẽ làm việc

$target.hide("slow", function(){ $(this).remove(); })

— rahul
nguồn

+1 để có câu trả lời đúng như các ý kiến trên đã nhận được. Bằng cách nào đó tôi thích $(this)thay vì lặp lại $targetquá.

— tạm biệt

đây chính xác là những gì tôi muốn sau khi tôi thử câu trả lời được chấp nhận, nó trông mượt mà hơn rất nhiều :)

— Catalin Hoha

17

$('#ur_id').slideUp("slow", function() { $('#ur_id').remove();});

— zohaib
nguồn

11

Tất cả các câu trả lời là tốt, nhưng tôi thấy tất cả họ đều thiếu "đánh bóng" chuyên nghiệp.

Tôi nghĩ ra cái này, mờ dần, trượt lên, rồi gỡ ra:

$target.fadeTo(1000, 0.01, function(){ 
    $(this).slideUp(150, function() {
        $(this).remove(); 
    }); 
});

— Sắc nét
nguồn

3

Tôi đến bữa tiệc muộn một chút, nhưng với bất kỳ ai như tôi đến từ một tìm kiếm Google và không tìm thấy câu trả lời đúng. Đừng hiểu sai ý tôi, có những câu trả lời hay ở đây, nhưng không chính xác những gì tôi đang tìm kiếm, mà không cần phải đắn đo thêm, đây là những gì tôi đã làm:

$(document).ready(function() {
    
    var $deleteButton = $('.deleteItem');

    $deleteButton.on('click', function(event) {
      event.preventDefault();

      var $button = $(this);

      if(confirm('Are you sure about this ?')) {

        var $item = $button.closest('tr.item');

        $item.addClass('removed-item')
        
            .one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {
          
                $(this).remove();
        });
      }
      
    });
    
});

/**
 * Credit to Sara Soueidan
 * @link https://github.com/SaraSoueidan/creative-list-effects/blob/master/css/styles-4.css
 */

.removed-item {
    -webkit-animation: removed-item-animation .6s cubic-bezier(.55,-0.04,.91,.94) forwards;
    -o-animation: removed-item-animation .6s cubic-bezier(.55,-0.04,.91,.94) forwards;
    animation: removed-item-animation .6s cubic-bezier(.55,-0.04,.91,.94) forwards
}

@keyframes removed-item-animation {
    from {
        opacity: 1;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1)
    }

    to {
        -webkit-transform: scale(0);
        -ms-transform: scale(0);
        -o-transform: scale(0);
        transform: scale(0);
        opacity: 0
    }
}

@-webkit-keyframes removed-item-animation {
    from {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    to {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 0
    }
}

@-o-keyframes removed-item-animation {
    from {
        opacity: 1;
        -o-transform: scale(1);
        transform: scale(1)
    }

    to {
        -o-transform: scale(0);
        transform: scale(0);
        opacity: 0
    }
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
  
  <table class="table table-striped table-bordered table-hover">
    <thead>
      <tr>
        <th>id</th>
        <th>firstname</th>
        <th>lastname</th>
        <th>@twitter</th>
        <th>action</th>
      </tr>
    </thead>
    <tbody>
      
      <tr class="item">
        <td>1</td>
        <td>Nour-Eddine</td>
        <td>ECH-CHEBABY</td>
        <th>@__chebaby</th>
        <td><button class="btn btn-danger deleteItem">Delete</button></td>
      </tr>
      
      <tr class="item">
        <td>2</td>
        <td>John</td>
        <td>Doe</td>
        <th>@johndoe</th>
        <td><button class="btn btn-danger deleteItem">Delete</button></td>
      </tr>
      
      <tr class="item">
        <td>3</td>
        <td>Jane</td>
        <td>Doe</td>
        <th>@janedoe</th>
        <td><button class="btn btn-danger deleteItem">Delete</button></td>
      </tr>
    </tbody>
  </table>
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


</body>
</html>

Mở rộng đoạn trích

— con yêu
nguồn

Chắc chắn điểm ở đây cho nó nhìn tuyệt vời. :-)

— SharpC

0

Tôi đã sửa đổi câu trả lời của Greg cho phù hợp với trường hợp của tôi và nó hoạt động. Đây là:

$("#note-items").children('.active').hide('slow', function(){ $("#note-items").children('.active').remove(); });

— nadula
nguồn

-4

Bạn có ý nghĩa như

$target.hide('slow')

?

— Jeremy Morgan
nguồn

1

Có, nhưng tôi cũng cần xóa nó sau khi hoạt hình.

— Mặt nạ