jquery - 如何撤消对文本区域和文本输入字段的更改

Question

我正在对我之前的问题进行一些跟进。我只是陷入了另一种逻辑。我有一个文本输入字段和两个按钮。 添加和撤消。当我单击添加时，输入的值将被附加到textarea和另一个文本输入字段，我将其后来设置为隐藏。

现在我正在尝试实现撤消按钮，但到目前为止我只能找到一个简单的解决方案来撤消字段的最后一个增量。我想知道是否还有任何简单的方法可以撤消任何数量的增量。我想最好的办法是删除 text input 中下一次出现的 , 和 /n 中的所有字符。 textarea，但我什至认为那不可能。

here是 JSFIDDLE 上当前的工作版本，代码如下。期待您的建议。谢谢。

HTML

    <div class="test1">

        <input type="text" class="reset actor_input" name="actor" value="add actors"></input>

        <input type="text" name="actors"></input>

        <div class="found_actors"></div>

        <div id="add" class="button_content">ADD</div>

        <div id="undo" class="button_content">UNDO</div>

        <div class="actors_list"><textarea readonly style="resize: none;" rows="20" cols="20" name="actors-list"></textarea></div>

    </div>

脚本

var textarea_before = null;
var input_before = null;

    $("#add").click(function() {
        textarea_before = $("[name='actors-list']").val();
        input_before = $("[name='actors']").val();
        $("[name='actors-list']").append($("[name='actor']").val()+'
');
        $("[name='actors']").val($("[name='actors']").val() + $("[name='actor']").val()+', ');
    });

    $("#undo").click(function() {

        $("[name='actors-list']").empty().append(textarea_before);
        $("[name='actors']").val(input_before);
    });

Answer 1

您可以将所有新参与者存储在一个数组中，然后更新输入字段和文本区域，如 this

var items = [];

$("#add").click(function() {
    // Push the new actor in the array
    items.push($("[name='actor']").val());
    populate();
});

$("#undo").click(function() {
    if (items.length > 0) {
        // remove last element of the array
        items.splice(-1,1);
        populate();
    }
});

populate = function() {
    $("[name='actors-list']").text('');
    $("[name='actors-list']").append(items.join('
'));
    $("[name='actors']").val(items.join(','));   
}