Как отменить изменения в текстовом поле и поле ввода текста

Question

Я немного отслеживаю свой предыдущий вопрос. Я просто застрял в другой логике. У меня есть text input field и две кнопки. Add и Undo. Когда я нажимаю add, значение input добавляется к textarea и другому text input field, который позже я буду скрыт.

Теперь я пытаюсь реализовать кнопку undo, но до сих пор я могу найти простое решение для отмены последнего приращения полей. Я хотел бы знать, есть ли какой-либо простой способ отменить любое количество приращений. Я думаю, лучше всего было бы сделать что-то вроде удаления всех символов до следующего появления , в 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> 

Script

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