Jquery 使用序列化数组和观察者模式列出应用程序

我正在尝试创建一个列表应用程序，该应用程序将允许用户将一个项目输入一个文本字段，该字段将在提交时动态创建（列表标记）。然后，我希望能够删除单独添加的任何项目（使用将添加到每个列表标记旁边的删除按钮）

到目前为止，我在提交输入字段后成功地创建了对象数组

如何仅获取数组对象的“值”，以便动态创建列表标记？ 然后如何删除所选元素

我想使用Observer模式来完成该应用程序

见下面我的代码：

---

谢谢

我已经创建了一个更新版的，似乎可以满足您的需要

…编辑。。。更新以反映您的请求。我没有注意到您正在将其保存在值数组中。很抱歉。我还对您的标记做了一些细微的更改

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


});

$（文档）.ready（函数（）{
var deleteBtn=“”；
var值=[]；
$（“#myForm”）.submit（函数（）{
var frm=$（“#myForm”）.serializeObject（）；
推送值（frm.项目）；
$（“#显示”）。追加（“
”+frm.item+”
“+deleteBtn+”
”）；
返回false；
});
$（“#显示”）。在（“单击”，“删除项”，函数（事件）{
var removietem=$（this.parent（）.children（'p'）.text（）；
$（'.log'）。在（“”+removietem+”删除“
”）之后；
$（this.parent（）.remove（）；
values=jQuery.grep（值，函数（值）{
返回值！=removeItem；
});
console.log（值）；
});
});

---

概念验证标记并不是最好的，但您已经了解了它的意思。

感谢您的快速响应和对JSFIDLE的更新。关于delete按钮，我想相应地修改对象数组（以反映元素列表）。例如，当删除一个项目（DOM元素）时，相应的对象也会从数组“values”中删除。谢谢，我明白了。还有一个问题-关于如何使用observer模式编写此应用程序的任何提示或文档（尝试学习）？我个人使用Peter Higgins的observer模式的pubsub实现。我所做的唯一更改是在publish方法周围添加了一个try-catch块。我还发现这对于学习不同的设计模式以及何时使用它们很有用。