Question

背景：

我正在编写一份注册表，用户可以在其中输入有关无限数量人的信息。每个人都作为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]

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

任何想法都会受到赞赏。

Answer 1

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

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

<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)将使用javascript slice函数从内存数组中删除该用户。

我希望这会有所帮助。如果你想要更多的例子，我可以把一个jsFiddle放在一起。

从jquery表单数据中删除json对象

1 个答案: