Append and remove an element

[littledevils326]

Not sure if I am in the right section for this. I am currently designing a web page using javascript, html and css. The page is a seat booking seat which allows the user to select and unselect seats. I have managed to get the page to display id of the seat when the user have selected a seat, but I am having problems trying to remove id from the display if user unselects the seat.

Below is the javascript code

    $('.available, .unavailable, .selected').click(function(){
        var ID = $(this).attr('class');
        if (ID == 'n unavailable' || ID == 'p unavailable') {
            alert ('Seat is already booked. Please select another seat.');
        }
        else if (ID == 'n selected' || ID == 'p selected') {
            alert ('You have now unselected this seat.');
            $(this).html('<img src = "free.gif"/>');
            $(this).removeClass('selected').addClass('available');
            y--;
            $("#seats").html("Number of seats selected: " + y);
            $("#list").remove($(this).attr('id'));
        }
        else {
            alert ('You have now reserved this seat. You can unselect it by clicking the seat again.');
            $(this).html('<img src = "selected.gif"/>');
            $(this).removeClass('available').addClass('selected');
            y++;
            $("#seats").html("Number of seats selected: " + y);
            $("#list").append($(this).attr('id') + "</br>");
        }
    });

[AleMonteiro]

See the comments:

$('.available, .unavailable, .selected').click(function(){
        // Save the reference for better performance and cleaner code
        // Use $ before the name to identify jquery objects
        var $this = $(this), 
            thisId = $this.attr('id'); 
        // Instead of getting the attr class use the method hasClass()
        //var ID = $(this).attr('class');
        if ($this.hasClass('unavailable')) {
            alert ('Seat is already booked. Please select another seat.');
        }
        else if ($this.hasClass('selected')) {
            alert ('You have now unselected this seat.');
            $this.html('<img src = "free.gif"/>');
            $this.removeClass('selected').addClass('available');
            y--;
            $("#seats").html("Number of seats selected: " + y);

            // This doesn't work because it's plain text.
            //$("#list").remove(thisId);

            // This is not pretty, but should work
            var listHtml = $("#list").html();
            listHtml = listHtml.replace(thisId + "<br/>", "");
            $("#list").html(listHtml);
        }
        else {
            alert ('You have now reserved this seat. You can unselect it by clicking the seat again.');
            $this.html('<img src = "selected.gif"/>');
            $this.removeClass('available').addClass('selected');
            y++;
            $("#seats").html("Number of seats selected: " + y);

            // A better approach would be to add an <span>, <li> or <div> with an specific ID or class so you could remove it latter using .remove()
            // It's <br/> and not </br>
            $("#list").append(thisId + "<br/>");
        }
    });

[AleMonteiro]

Why did someone vote the post down without even commenting why or replying something?
This isn't very nice or helpfull to anyone.

[lps]

apparently this code is messing around: $("#list").remove($(this).attr('id'));
According to http://api.jquery.com/remove/ .remove() will remove the whole dom element with the selector. In order to unset the id, I will use .attr('id',''); to set the id to empty.