jQuery form cloning extras

Got the code here: http://jsfiddle.net/vdUuy/11/

How would I add the following span to the participants div and add the click handler so it would remove the participant added?

<span class="remove_participant">&nbsp;</span>

Open in new window


Also, it looks like the click handler isn't working, don't know why.
LVL 26
Eddie ShipmanAll-around developerAsked:
Who is Participating?
 
moagriusCommented:
since it's a span (and not a block level element with set width/height), you need some content in there to make it show up (otherwise it's width and height of 0).

so you can either:

1) make the class display: block with set width and height (and probably a float)
2) just add a space as content s.html('&nbsp;');

here's the fiddle updated with the space

http://jsfiddle.net/S24wu/14/
0
 
moagriusCommented:
change this:

 p.text(o.fname + ' ' + o.lname);
        p.data('index', i);
        p.click(deleteParticipant);
        list.append(p);

to this

        var s = $('<span>');
        s.addClass('remove_participant');
        s.data('index', i);
        s.click(deleteParticipant);
        p.append(s);
        list.append(p);

I tried updating the fiddle, but there are some other issues (e.g., there's no element with id of "add-participant")

you also want to use e.preventDefault() in any click action triggered by a link to stop the default behavior

someLink.click(function(e){
  // do stuff..
  e.preventDefault();
});
0
 
moagriusCommented:
just to clarify - the listParticipants function should now look like:

function listParticipants(){
    list.empty();
    for(var i = 0, l = participants.length; i < l; i++){
        var o = participants[i];
        var p = $('<p>');
        p.text(o.fname + ' ' + o.lname);
        var s = $('<span>');
        s.addClass('remove_participant');
        s.data('index', i);
        s.click(deleteParticipant); 
        p.append(s);
        list.append(p);
    }  
}

Open in new window

0
Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

 
Eddie ShipmanAll-around developerAuthor Commented:
The fiddle has the add-participant id on the button now but I can't understand why the remove-participant doesn't have the image. I see the styling in FB but not see the image.
0
 
moagriusCommented:
i don't think you linked the right fiddle, then - that one definitely does not have a button with id of add-participant...  and the button doesn't work...  can you double check the link?
0
 
Eddie ShipmanAll-around developerAuthor Commented:
I didn't know it changed the URL when you updated.
try this one.
http://jsfiddle.net/S24wu/13/
0
 
Eddie ShipmanAll-around developerAuthor Commented:
Saved my butt, again, thanks.
0
 
moagriusCommented:
glad i could help.  i'm out for the day, but i'll check in again tomorrow if anything else comes up for this.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.