Member Avatar for 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>");
        }
    });
  • 3 Contributors
  • 3 Replies
  • 221 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by lps

Dani AI

Generated

A few focused points that build on the thread and make the list removal reliable.

@yittledevils326 described the symptom: the seat id shows when selected but does not disappear when unselected. correctly suggested using hasClass() and warned that operating on the list as plain text is brittle. was right that .remove() acts on DOM elements — but setting attr('id','') (as suggested) is weaker than removing the attribute altogether. The root cause here is that the UI was appending raw text (or line breaks) to #list instead of real elements you can target and remove.

Use a simple model + DOM-elements approach:

  • Keep a data attribute on each seat (data-seat="A12") so code reads a single canonical id.
  • Render selected items as real elements (for example <li id="sel-A12">…</li>) inside an explicit container (<ul>). That makes removing trivial with $('#sel-'+seatId).remove().
  • Track selection state in a Set/array so the counter comes from the model, not string parsing.

Example pattern (paraphrased and changed from thread code):

const selected = new Set();

$('#seating').on('click', '.seat', function () {
  const $s = $(this);
  const sid = $s.data('seat');            // use data-seat on the seat element

  if ($s.hasClass('unavailable')) return alert('Seat is already booked.');

  if ($s.hasClass('selected')) {
    $s.removeClass('selected').addClass('available');
    selected.delete(sid);
    $('#sel-' + sid).remove();           // remove the corresponding list item
  } else {
    $s.removeClass('available').addClass('selected');
    selected.add(sid);
    $('#selectedList').append('<li id="sel-' + sid + '">Seat ' + sid + '</li>');
  }

  $('#counter').text('Number of seats selected: ' + selected.size);
});

Troubleshooting tips

  • If removal fails, inspect #list with DevTools to see whether you appended text nodes or elements. Text cannot be removed by selecting an element ID.
  • Prefer removeAttr('id') over attr('id','') when you really want the attribute removed.
  • Prefix generated element IDs (e.g., sel-) so selectors never start with a bare digit and avoid escaping issues.
  • For cleaner UI swaps, toggle classes and use CSS for images/backgrounds instead of replacing inner HTML.

This approach makes add/remove operations deterministic, debugs easily in the console, and avoids fragile string manipulation of HTML.

Recommended Answers

All 3 Replies

Member Avatar for 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/>");
        }
    });
Member Avatar for AleMonteiro

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

Member Avatar for 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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.