Question

我有一张桌子，里面有一个按钮，一旦我按下按钮就会把文字添加到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
    };
});

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

请尝试以下方法：

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

Answer 3

两种方式：

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 wrong]将以前的.html（） - 元素的整个HTML代码 - 保存到全局变量中;然后在必要时从全局变量恢复文本的先前版本。

JQuery undo append

3 个答案: