Список приложений с использованием serializeArray и шаблона наблюдателя

Question

Я пытаюсь создать приложение списка, которое позволит пользователю вводить элемент в текстовое поле, которое будет динамически создаваться в submit (тег списка). Затем я хочу иметь возможность удалять любой элемент, добавленный отдельно (с помощью кнопки удаления, которая будет добавлена ​​рядом с каждым тегом списка).

До сих пор мне удалось создать массив объектов после отправки поля ввода.

Как я могу получить только «значение» объекта Array, чтобы динамически создать свой список? Как я могу удалить выбранный элемент?

Я хотел бы заполнить это приложение с помощью шаблона наблюдения.

Смотрите мой код ниже: http://jsfiddle.net/Lk3p8/

Благодарности

Answer 1

Я создал обновленную версию jsFiddle, которая, кажется, что вы хотите.

..edit ... обновлен, чтобы отразить ваш запрос. Я не заметил, что вы сохранили его в массиве значений. Извини за это. Я также внес некоторые небольшие изменения в вашу разметку.

$(document).ready(function(){ 

var deleteBtn = "<input class='deleteitem' type='button' value='Delete' name='delete' id='delete' />"; 
var values = []; 
$("#myForm").submit(function(){ 
    var frm= $("#myForm").serializeObject(); 

    values.push(frm.item); 


    $("#display").append("<li><p>" + frm.item +"</p>"+ deleteBtn +"</li>"); 
    return false; 
}); 


$("#display").on("click", ".deleteitem", function(event){ 
    var removeItem = $(this).parent().children('p').text(); 
    $('.log').after("<p>"+removeItem + " removed</p>");  
    $(this).parent().remove(); 


    values = jQuery.grep(values, function(value) { 
     return value != removeItem; 
    }); 

    console.log(values); 
}); 


}); 

Доказательство разметки концепции не является наибольшим, но вы получаете идею.