CODEWITHSUNDEEP
javascriptjquery
ngplayground
ngplayground

Reputation: 21617

jQuery remove multiple inputs then append just one

<input type="text" name="val1"/>
<input type="text" name="val2"/>

$('.beta-panel input').fadeOut(function(){
    $(this).remove();
    $('.beta-panel').append('<h1>Done</h1>');
});

I have the above code where when a button is clicked it runs a fade out and then appends and fades in a done tag. The problem is, when it fades and removes the inputs, it shows the same amount of <h1> tags as the inputs.

Upvotes: 0

Views: 49

Answers (3)

Jai
Jai

Reputation: 74738

You can use a .promise() in this case:

$('.beta-panel input').fadeOut(function(){
   $(this).remove();
}).promise().done(function(){
   $('.beta-panel').append('<h1>Done</h1>');
});

From the documentation:

.promise()

Description: Return a Promise object to observe when all actions of a certain type bound to the collection, queued or not, have finished.

Upvotes: 0

enguerranws
enguerranws

Reputation: 8233

Try something like : 

$('.beta-panel input').fadeOut(function(){
    $(this).remove();

}).parent().append('<h1>Done</h1>');

Upvotes: 0

Amit Joki
Amit Joki

Reputation: 59232

Instead of:

$('.beta-panel').append('<h1>Done</h1>');

do:

$(this).closest('.beta-panel').append('<h1>Done</h1>');

$(this) holds reference to the clicked element and .closest will find the .beta-panel which is closest to $(this) and then it appends.

Upvotes: 1

Related Questions