Code not running when using ".remove()" function

Question

I'm writing this jquery code :

$('form').after('<p id="suc"></p>');
$('#suc').html('success !');
$('#suc').show(700);
setTimeout(function(){$('#suc').hide('slow')},2500);
$('#suc').remove();

When i remove $('#suc').remove(); like this :

$('form').after('<p id="suc"></p>');
$('#suc').html('success !');
$('#suc').show(700);
setTimeout(function(){$('#suc').hide('slow')},2500);

The code run succefuly, but when i put it, it dosen't run !!

What the problem with that ? it's illegal to but $('#suc').remove(); here ?

Guffa · Accepted Answer · 2013-02-05 09:08:04Z

1

The setTimeout call doesn't wait for the callback to run before the code continues, so you will be removing the element immediately. When the code in the callback tries to hide the element, it's not there.

Remove the element in the complete callback of the hide method:

setTimeout(function(){
  $('#suc').hide('slow', function(){
    $('#suc').remove();
  });
},2500);

answered Feb 5, 2013 at 9:08

Guffa

703k111 gold badges760 silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

walid Over a year ago

thank you in advance,it's now running..but i need more explaination : what happend is that the whole code not running not only that last tow sentences ! so what the reason of that ?

Guffa Over a year ago

@walid: The element will be removed even before the show animation runs.

walid Over a year ago

but why !!? is it running asynchronously ?

Guffa Over a year ago

@walid: Yes, all animations are asynchronous. There are no updates in the browser while your function is running, so animations have to be asynchronous.

Yoshi · Accepted Answer · 2013-02-05 09:27:20Z

1

As you're using hide you're also safe to use delay, so:

$('#suc').show(700).delay(2500).hide('slow', function () {
  $(this).remove();
});

will suffice.

demo: http://jsbin.com/isediz/2/

Also, as a bit of clarification, regarding:

The code run succefuly, but when i put it, it dosen't run !!

Actually the code runs (in a sense), the problem is that your remove will not wait for the two asynchrones events (setTimeout and .hide('slow')). So it will get executed way before those two are done doing what they should do.

edited Feb 5, 2013 at 9:27

answered Feb 5, 2013 at 9:17

Yoshi

54.8k14 gold badges93 silver badges108 bronze badges

Comments

BenM · Accepted Answer · 2013-02-05 09:07:57Z

0

You need to put the remove() inside of the setTimeout and in the callback for the hide() function:

$('form').after('<p id="suc"></p>');
$('#suc').html('success !');
$('#suc').show(700);

setTimeout(function() { 
    $('#suc').hide('slow', function() { $(this).remove(); })
}, 2500);

answered Feb 5, 2013 at 9:07

BenM

53.3k26 gold badges116 silver badges172 bronze badges

Comments

Adil · Accepted Answer · 2013-02-05 19:01:40Z

0

You are using the element setTimout callback which you have already removed with the statement just after setTimout. The call back of setTimeout will execute after the statement removing element with id #suc by the next statement of setTimeout. Remove #suc in hide callback so that it is not accessed by script after removal.

$('form').after('<p id="suc"></p>');
$('#suc').html('success !');
$('#suc').show(700);
setTimeout(function(){
      $('#suc').hide('slow', 
           function(){$(this).remove();
      }); 
},2500);

edited Feb 5, 2013 at 19:01

answered Feb 5, 2013 at 9:06

Adil

148k25 gold badges217 silver badges207 bronze badges

2 Comments

Adil Over a year ago

I dont think so, setInterval is for 25 seconds here.

BenM Over a year ago

It's setTimeout, not setInterval.

Collectives™ on Stack Overflow

Code not running when using ".remove()" function

4 Answers 4

4 Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related