Ajax :: Call To Database Before Closing Row

I have a table with a list of games in rows. I want the user to be able to close/hide the game they don't want to play. At the moment I am using this;

Code:
<script language="JavaScript" type="text/JavaScript">
function removeR(r){
r.parentNode.removeChild(r);
}
</script>
<table>
<tr>
<td>Game 1</td>
<td><input name="button" type="button" onclick="removeR(this.parentNode.parentNode)" value="Close" /></td>
</tr>

<tr>
<td>Game 2</td>
<td><input name="button" type="button" onclick="removeR(this.parentNode.parentNode)" value="Close" /></td>
</tr>

<tr>
<td>Game 3</td>
<td><input name="button" type="button" onclick="removeR(this.parentNode.parentNode)" value="Close" /></td>
</tr>
</table>

This hides the games the user doesnt want to see on the page. But before the game is hidden I want to make an Ajax call to the database and add the user's preference into the table so next time the user comes to the page I can hide the game from the start. How can I do this?