jQuery：单击删除内容后，如何使用触发添加功能的按钮重置按钮？

Question

So I have this function where I add content on click to a "Favorites page", but when I click the button to remove it from the Favorites tab it removes the content but the button on the main page does not reset, the question is, how do I reset the button to it's original state after clicking the "Unfavorite" button?

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

        }
    });
});

And my second question related to this code is, how do I add a button to be on the same row with the content that is being added to the "Favorites"? I tried a simple .append(); but it did not suffice as the button got placed in a new row, will .css() suffice? The questions might be stupid but I am still on my first steps in learning jquery

Answer 1

I'd avoid cloning if possible because there are simpler ways to do what you're trying to do. The code below will create a new button and add it to your favorites page. It will also attach an event to the Remove button to change the text of the Favorited button as well as remove itself after being clicked.

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

As for your second question, there is CSS that allows elements to live on the same line. For example, if you have two buttons that you want on the same line, it would look something like this:

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

Let me know if you have any questions.