Remove json object from jquery form data

Question

Background:

I'm working on a registration form in which a user can enter information about an unlimited number of people. Each person is entered as a json object and is made up of the fields, as demonstrated below.

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

Once their object is added, each person is then displayed on a grid with their profile picture and name see code below:

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

My question: I would like to add a button that would allow a user to remove a person from this dataset.

I assume that this means I would be removing a json object, using a script like this:

delete data.result[this]

I'm just not sure how to apply it in a button for each element.

Any ideas would be appreciated.

Answer 1

If the finishAddPerson() function is storing the elements in an array, then you can use the slice (link) function to remove an element from the array.

In order to trigger this action I would do something like this

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

This can be created at the same time as your element

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

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

Obviously the parent().remove() is dependent on the DOM structure and where you choose to place the button but you get the idea.

The removePerson(personId) would utilize the javascript slice function to remove that user from the in memory array.

I hope this helps. I can put together a jsFiddle if you would like more examples.