Jquery：點擊刪除內容後，如何重置與我觸發添加功能的按鈕？

Question

所以我有這個功能，我點擊添加內容到「收藏夾頁面」，但是當我點擊按鈕將它從收藏夾標籤中刪除時，它會刪除內容，但主頁面上的按鈕不會重置，問題是，如何在點擊「Unfavorite」按鈕後將按鈕重置爲原始狀態？

https://jsfiddle.net/yjL7L6g7/3/

$(document).ready(function() { 
$('button').click(function() { 
if ($(this).html() == 'Favorite') { 
var $favorited = $(this).parent().parent().parent().clone(); 
$(this).html('Favorited'); 
$favorited.find('button').html('Unfavorite'); 
$($favorited).click(function() { 
$(this).remove(); 
}); 

      $('#favorites').append($favorited); 

     } 
    }); 
}); 

我的第二個問題與此相關的代碼，我怎麼添加一個按鈕，可以在同一行與被添加到「收藏夾」的內容？我嘗試了一個簡單的.append（）;但它沒有足夠的按鈕被放置在一個新的行，將.css（）足夠？ 這些問題可能是愚蠢的，但我仍然在學習jQuery的第一步

Answer 1

我會盡可能避免克隆，因爲有更簡單的方法來做你想做的事情。下面的代碼將創建一個新的按鈕，並將其添加到您的收藏夾頁面。它還會將一個事件附加到「刪除」按鈕上，以更改「已收藏」按鈕的文本以及單擊後自行刪除。

$(document).ready(function() { 
    $('button').click(function() { 
     if ($(this).html() == 'Favorite') { 
      var that = this; 

      $(this).html('Favorited'); 
      var id = $(this).attr('id'); 
      $('#favorites').append('<button id="' + id + 'Remove" class="ui-btn">Remove</button>'); 

      $('#' + id + 'Remove').click(function() { 
       $(this).remove(); 
       $(that).html('Favorite'); 
      }); 
     } 
    }); 
}); 

至於你的第二個問題，有CSS允許元素住在同一條線上。例如，如果您有想在同一條線上兩個按鈕，它會是這個樣子：

<button style="display: inline;">Button1</button> 
<button style="display: inline;">Button2</button> 

讓我知道如果您有任何問題。