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