removing item from list (JQuery)

Question

i have a table with car models in it. When a user clicks a car the selected car is shown in a list under the table. Now, i wanna so when the user clicks the car again it is removed from the list.

jsfiddle demo

Answer 1

Have you tried using remove() ?

//DONNO WHAT TO PUT
$(this).remove();

UPDATE

Considering a non-dynamic table structure you can use index() to safely pinpoint a row, uniquely. Combining it with an id (preferably starting with a unique string, as not to clash with the rest of your page, like list_ ) and remove(), you should get the required effect.

Here's a fork of your code .

Answer 2

Here you go!

I added a ref to the link you are adding to the row element, thus you can check for it and remove it:

function colorStay(){
    $(this).css('background-color','red');
    $(this).unbind('mouseover', changeColor);
    $(this).unbind('mouseout', removeColor);

    $('#stay').css({
        paddingTop:15,
        fontSize:22
    });
    var staylink = $("<a id='"+ $(this).find(':last').text() +"' href='http://www.google.ca'>"+ $(this).find(':last').text() +"</a><br />");
    $('#stay').append(staylink);
    $(this)[0].staylink = staylink;

}

function remove(){
    $(this).css('background-color','white');
    $(this).bind('mouseover', changeColor);
    $(this).bind('mouseout', removeColor);

    //DONNO WHAT TO PUT
    if($(this)[0].staylink){
        $(this)[0].staylink.remove();
        $(this)[0].staylink = false;

    }
}