javascript - 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>

如果您有任何疑问，请告诉我。