简体   繁体   中英

Append and remove an element

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

remove() removes a dom element, not an attribute. Just set the attribute to an empty string: $("#list").attr('id', '')

edit

After reviewing your question, I think I misunderstood. You want to remove the text which displays the ID, not the actual id attribute, correct?

In this case, the easiest thing would be to wrap the text node in some sort of element, to make it easier to select for removal.

Where you append the string ( $("#list").append($(this).attr('id') + "</br>"); ), wrap the output in a span like so:

$("#list").append('<div class="id">' + $(this).attr('id') + "</div>");

This way, you can remove it as such:

$('#list').remove('#id');

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM