JQuery undo append

Question

I've got a table with a button inside a td, once I press the button it adds text to the td. I want to remove this text inside the td once i press the button again. note that this button is used multiple times in the table hence the class attribute. Which method could I use to get this done?

This is my code:

$(document).on('click', '.releasebutton', function () { // button class="releasebutton"
    var label = $(this).text();
    if (label == "Add") { // it is "Add" by default
        $(this).text("Cancel");
        $('.ReleaseTD').append("<br>" + "test"); // td class="ReleaseTD"
    }
    // the code above this works
    else {
        $(this).text("Add");
        $('.ReleaseTD').remove("<br>" + "test"); 
        // this obviously is wrong but this is where i would like the correct code
    };
});

score 3 · Accepted Answer · answered Sep 22 '16 at 12:24

3

You could create ID for text inside like this:

$(document).on('click', '.releasebutton', function () { // button class="releasebutton"
    var label = $(this).text();
    if (label == "Add") { // it is "Add" by default
        $(this).text("Cancel");
        $('.ReleaseTD').append("<span id='textID'><br>" + "test</span>");
    }
    else {
        $(this).text("Add");
        $('#textID').remove(); 
    };
});

answered Sep 22 '16 at 12:24

Imphusius

648
5
15

This seems to work if I use only one button, if I want to add this button in every this wouldn't work right? I'll improve my question. – Roy123 Sep 22 '16 at 12:29
1

You will need unique id then, for example insert TR number ID in like that and then you press button send data through the button same as TR number ID – Imphusius Sep 22 '16 at 12:31

score 2 · Answer 2 · answered Sep 22 '16 at 12:26

Please try the following:

$(document).on('click', '.releasebutton', function () { // button class="releasebutton"
    var label = $(this).text();
    if (label == "Add") { // it is "Add" by default
        $(this).text("Cancel");
        $('.ReleaseTD').append("<span id='txt_name'><br>" + "test</span>");
    }
    // the code above this works
    else {
        $(this).text("Add");
        $('#txt_name').remove(); 
    };
});

score 1 · Answer 3 · 2016-09-22T12:32:26.647

Two ways:

1) Append your text into a span with a unique ID, and then delete this ID. For example, delete the ID with the largest number. Dumbest way would be to just store the latest ID in a global variable.

var global_last_appended_id = 0;

$(document).on('click', '.releasebutton', function () { // button class="releasebutton"
    global_last_appended_id ++;
    $('.ReleaseTD').append("<span id='appended-text-" + global_last_appended_id + "'><br>" + "test</span>");
  }
    // the code above this works
    else {
        $(this).text("Add");
        $('#appended-text-' + global_last_appended_id).remove(); 
        global_last_appended_id--; //go one step back so next time we remove the previous paragraph
    };
});

Update: after your edit I've added the ability to undo multiple times. Basically there is unlimited undo.

2) [lame and wrong] Save the previous .html() - the whole HTML code of your element - into a global variable; then restore the previous version of the text from the global variable when necessary.

JQuery undo append

3 Answers3

Linked