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>');
});

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

Answer 1

代替：

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

做：

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

$(this)保留对clicked元素的引用， .closest将找到最接近$(this) .closest .beta-panel ，然后追加。

Answer 2

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

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

---

从文档中：

.promise()

描述：返回一个Promise对象，以观察绑定到集合的某种类型的所有操作（是否排队）是否已完成。

Answer 3

尝试类似的东西：

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

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