2

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.

neanderslob
  • 2,331
  • 4
  • 30
  • 72

1 Answers1

0

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.

Community
  • 1
  • 1
benashby
  • 448
  • 2
  • 11
  • Thanks for the reply. I'm actually hoping not to have it reliant on user id, so that any user with access can add/remove any person in the dataset. Is there a way to do it without the "your-user-id"? – neanderslob Sep 04 '13 at 22:21
  • 1
    I'm sorry. I should have specified. The "your-user-id" can be any identifying string. I assumed that you would use the id parameter of the person object here. I now see that I typed something wrong and will go fix that. – benashby Sep 04 '13 at 22:36
  • Hey, thanks so much for the tip. I modified the function accordingly but my modifications seemed to crash the script. To be more precise, adding the button wasn't the issue, but the remove-user-btn function seems to be the issue. I've saved the modifications in [a .txt file here.](https://dl.dropboxusercontent.com/u/11993667/people.txt) If you had a couple more examples, I'd love to see them (I'm really new to all things javascript and am trying to catch up). Thanks so much for giving me a hand here, I really appreciate it. – neanderslob Sep 05 '13 at 04:36