Remove THIS element after change it's class

Question

I'm trying to delete element 'this' ,500ms after changing its class, but it does not work

     $('.card').click(function() {
            setTimeout(function(){
                $(this).remove();
                console.log('removed');
            },500);
            $(this).toggleClass("card card-used");
     });

and HTML

<div class="card">asdasd</div>

I can see "removed" in my console log but it wasn't remove()

`this` exists within the click function, not the function you pass to setTimeout. — j08691, Aug 29 '19 at 20:21
To expand on my above comment, `this` ion your example refers to the window object — j08691, Aug 29 '19 at 20:32

score 3 · Accepted Answer · answered Aug 29 '19 at 20:28

To achieve expected result, use arrow function to inherit this from the parent scope i.e .card , as this inside setTimeout function refers to window object

Please refer this link for more details- Lexical Scope in JavaScript

$('.card').click(function() {
            setTimeout(() => {
                $(this).remove();
                console.log('removed');
            },500);
            $(this).toggleClass("card card-used");
     });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">asdasd</div>

score 1 · Answer 2 · answered Aug 29 '19 at 20:22

As already described, this belongs to the click context and cannot be accessed in the callback. But you can store it into a variable and access it in the callback.

$('.card').click(function() {
        var self = this;
        setTimeout(function(){
            $(self).remove();
            console.log('removed');
        },500);
        $(this).toggleClass("card card-used");
 });

Remove THIS element after change it's class

2 Answers2