Javascript JQuery撤消追加

我有一个在td中有一个按钮的表格，一旦我按下按钮，它就会向td添加文本。我想在再次按下按钮后删除td中的此文本。请注意，此按钮在表中多次使用，因此为class属性。 我可以用哪种方法来完成这项工作

这是我的代码：

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

---

您可以像这样为内部文本创建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(); 
    };
});

---

您可以像这样为内部文本创建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(); 
    };
});

两种方式：

1将文本附加到具有唯一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 Error]将previous.html（元素的整个html代码）保存到一个全局变量中；然后在必要时从全局变量中恢复以前版本的文本。

两种方法：

1将文本附加到具有唯一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 Error]将previous.html（元素的整个html代码）保存到一个全局变量中；然后在必要时从全局变量还原以前版本的文本。

请尝试以下操作：

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

---

请尝试以下操作：

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

---

如果我只使用一个按钮，这似乎是可行的，如果我想在每个按钮中添加此按钮，这将无法正常工作？我会改进我的问题。然后你需要唯一的id，例如，像那样插入TR编号id，然后你按下按钮，通过与TR编号id相同的按钮发送数据。如果我只使用一个按钮，这似乎有效，如果我想在每个按钮中添加此按钮，这不会正常工作？我将改进我的问题。您将需要唯一的id，例如，像这样插入TR编号id，然后按下按钮通过与TR编号id相同的按钮发送数据