How do I delay the removal of a div with jquery?

Question

This is my code - it works if I remove the .delay(2000), but what I am trying to do is remove it after 2 seconds.

 $('.back').on('click', function () {
      $(this).delay(2000).remove();
 });    

Answer 1

Thejquery delay() funciton works only for a queue of 'effects' and is not a replacement for javascirpt setTimeout which is more appropriate to be used here.

The .delay() method is best for delaying between queued jQuery effects. Because it is limited—it doesn't, for example, offer a way to cancel the delay—.delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases.

Source: jquery delay()

See a demo below:

$('.back').on('click', function() {
  setTimeout(() => {$(this).remove()}, 2000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="back">Some text here</div>

Answer 2

$('.back').on('click', function () {
    setTimeout(function(){ 
        $('.back').remove();
    }, 2000);
});   

You can see the demo here

jsfiddle

Answer 3

You should make your execution wait

var ele;
$(document).ready(function(){
$('.back').on('click', function () {
   ele = this;
     setTimeout(function(){ 
         $(ele).remove();
     }, 1000);
 });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="back" style="background-color:red; height:200px; width:200px;">
</div>

Answer 4

There are two ways through which you can hide class .back. If you are using .remove() method then delay won't work, it acts much similar to setting .css('display','none'), so you have to use setTimeout() and execute that. Whereas delay works fine with .fadeOut() as it animates element opacity and then hide that.

.remove() - Use .remove() when you want to remove the element itself, as well as everything inside it. In addition to the elements themselves, all bound events and jQuery data associated with the elements are removed.

.fadeOut() - The .fadeOut() method animates the opacity of the matched elements. Once the opacity reaches 0, the display style property is set to none, so the element no longer affects the layout of the page.

$('.back').on('click', function () {
   setTimeout(function(){
      $('.back').remove();
      },2000);
 }); 

.back{
  width:200px;
  height:200px;
  background:#ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="back">

</div>

$('.back').on('click', function () {
      $(this).delay(2000).fadeOut();
 }); 

.back{
  width:200px;
  height:200px;
  background:#ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="back">

</div>