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

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

• javascript
• jquery
• html

3 Answers 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(); 
    };
});

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

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.