JQueryを元に戻す

Question

私はtdの中にボタンがあるテーブルを持っています。ボタンを押すとtdにテキストが追加されます。一度ボタンをもう一度押すと、このテキストが削除されます。 このボタンはテーブルに複数回使用されることに注意してください。 これを行うにはどの方法を使用できますか？

これは私のコードです：

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

Answer 1

あなたは内部のこのようなテキストのためのIDを作成することができます。

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

Answer 2

二つの方法：

1）Aとのスパンにあなたのテキストを追加一意のIDを入力し、このIDを削除します。たとえば、最も大きな番号のIDを削除します。愚かなやり方は、最新のIDをグローバル変数に格納することだけです。

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

更新：あなたの編集後、私は複数回を元に戻す機能を追加しました。基本的に無制限の元に戻すことができます。

2）[lame and wrong]以前の.html（）要素のHTMLコード全体をグローバル変数に保存します。必要に応じてグローバル変数から前のバージョンのテキストを復元します。

Answer 3

次のことを試してください：

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