jQuery：單擊刪除內容后，如何使用觸發添加功能的按鈕重置按鈕？

Question

因此，我具有此功能，可以在單擊時將內容添加到“收藏夾頁面”，但是當我單擊從“收藏夾”選項卡中將其刪除的按鈕時，它將刪除內容，但是主頁上的按鈕沒有重置，問題是，單擊“不喜歡的”按鈕后，如何將按鈕重置為其原始狀態？

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>

如果您有任何疑問，請告訴我。