jQuery删除多个输入，然后仅追加一个

Question

<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.

Answer 1

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.

Answer 2

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.

Answer 3

Try something like :

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

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