Question

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

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

我有上面的代码，当点击一个按钮时，它会运行淡出，然后在done标记中追加并淡入淡出。问题是，当它淡入并删除输入时，它会显示与输入相同数量的<h1>标记。

Answer 1

而不是：

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

做的：

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

$(this)保留对点击元素的引用，.closest会找到最接近.beta-panel的{{1}}，然后附加。

Answer 2

在这种情况下，您可以使用.promise()：

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

来自文档：

`.promise()`

描述：返回一个Promise对象来观察a的所有动作某个绑定到集合的类型，排队与否，已完成。

Answer 3

尝试类似：

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

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

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

3 个答案:

`.promise()`