javascript - Having trouble unbinding a function -

i have 4 images of people, each person has 4 images of food corresponds them. when name of person clicked, bolds name. un-bolds if click name.

the second thing i'm trying do, have food images switch when click on each person. far, seem compiling, , not dumping previous. tried unbinding functions pull in images try , have images disappear when click new name, can't make work!

anyone know can do? appreciated!

$(document).ready(function(){   $('a').click(function(){     $(".onclick").removeclass('onclick');     $(this).addclass('onclick');     return false;   });   $('#jim').click(function(){     grocerylist (jim);     $("#jim").unbind();     return false;   });   $('#jane').click(function(){     grocerylist (jane);     $("#jane").unbind();     return false;   });   $('#bob').click(function(){     grocerylist (bob);     $("#bob").unbind();     return false;   });   $('#roberta').click(function(){     grocerylist (roberta);     $("#roberta").unbind();     return false;   }); }); 

what have do, instead of unbinding click handler, clear food area before add next batch of items:

function grocerylist (a){     "use strict";      $('#food').children(':not(h2)').remove();     // rest of function }