2

背景：

我正在制作一个注册表单，用户可以在其中输入有关无限人数的信息。每个人都作为一个 json 对象输入，并由字段组成，如下所示。 

    addPerson: function() {
        //Create a json object for this person.


        var person = {
            id: $("#dialog").data("person"),
            fname: $("#dialog input[name=pfname]").attr("value"),
            lname: $("#dialog input[name=plname]").attr("value"),
            title: $("#dialog input[name=ptitle]").attr("value"),
            bio:   $("#dialog textarea[name=pbio]").attr("value"),
            photo: $("#dialog input[name=photo]").attr("value"),
            owner: $("#dialog input[name=owner]").prop("checked") ? $("input[name=owner]").attr('checked', true),
            percent: $("#dialog input[name=ppercent]").attr("value"),
            edu: $("#dialog textarea[name=pedu]").attr("value"),
            skills: $("#dialog textarea[name=pskills]").attr("value"),
            prof: $("#dialog textarea[name=pprof]").attr("value"),
            awards: $("#dialog textarea[name=pawards]").attr("value"),
            community: $("#dialog textarea[name=pcommunity]").attr("value"),
            years: $("#dialog input[name=pyears]").attr("value"),
            compensation: $("#dialog textarea[name=pcompensation]").attr("value"),
        }

        $(this).dialog("close");

        upsmart.people.finishAddPerson(person);
    },

添加对象后，每个人都会显示在网格上，并带有他们的个人资料图片和姓名，请参见下面的代码：

    finishAddPerson: function(person) {
        upsmart.people.people[person.id] = person;
        if($("#person"+person.id).length == 0) {
            box = $("<div class='person'></div>").attr("id","person"+person.id);
            box.data("person",person.id);
            box.insertBefore($("#new"));
        } else {
            box = $("#person"+person.id);
            box.html("");
        }

        box.append($("<img/>").attr("src",person.photo));
        box.append($("<div/>").attr("class","label").html(person.fname+" "+person.lname));
    }

我的问题： 我想添加一个按钮，允许用户从此数据集中删除一个人。

我假设这意味着我将使用如下脚本删除一个 json 对象：

delete data.result[this]

我只是不确定如何在每个元素的按钮中应用它。

任何想法，将不胜感激。

4

1 回答 1

0

如果 finishAddPerson() 函数将元素存储在数组中，那么您可以使用切片（链接）函数从数组中删除元素。

为了触发这个动作，我会做这样的事情

<button class="remove-user-btn" data-person="person-id">Remove Foo User</button>

这可以与您的元素同时创建

$('.remove-user-btn').bind('click', function(e) {
    removePerson($(this).attr('data-person'));

    //Remove the containing div here as well, something like
    $(this).parent().remove()
});

显然 parent().remove() 取决于 DOM 结构以及您选择放置按钮的位置，但您明白了。

将removePerson(personId)利用 javascriptslice函数从内存数组中删除该用户。

我希望这有帮助。如果您想要更多示例，我可以组合一个 jsFiddle。

于 2013-09-04T21:27:34.187 回答