Question

I have a code which allows me to add certain “absentees”, along with their ID’s through a hidden form, to the absentees list when I click on them. When I click on it again, the “absentee” is removed from the absentees list. However, when I click on it again, the list seems to extend further because of a br
in my code plus the hidden form value doesn’t seem to be removed. I need the hidden value removed so that the removed absentee from the list will not be recorded in the database. I need the br
so that the absentee listing will be presentable.

Here’s my code: http://jsfiddle.net/gk5pV/8/

Answer 1

I wholeheartedly agree with @charlietfl, just use a block level element. Also, use a single hidden input to track your absentees. Example fiddle, code below:

$(function() {
    $("td").click(function() {
        var $this = $(this);
        var user = $this.attr('id');
        var p = $('<p />').attr('user', user).text($this.text());
        var absentees = [];
        if ($('#absentees').val().length > 0) {
            absentees = $('#absentees').val().split(',')
        }
        if ($(this).hasClass('on')) {
            //console.log("Already marked absent");
            //remove from collection
            $("#collect").children('p[user="' + user + '"]').remove();
            absentees.splice(absentees.indexOf(user), 1);
        }
        else {
            //console.log(user);
            //add to collection
            $("#collect").append(p);
            absentees.push(user);
        }
        $this.toggleClass('on');
        $('#absentees').val(absentees.join(','));
    });

    $("#clicky").click(function() {
        $('td').removeClass('on');
        $("#collect").empty();
        $('#absentees').val('');
     });
});​