jQuery / AJAX Appending search results - how do I clear only one? - php

Question

I've coded some jquery & AJAX to call a PHP function I made that goes and gets some API data and brings it without refreshing the page. It appends, so you can have multiple searches without losing results.
What I need to do now is, I want to give the user the ability to change his mind on any one of the results. Maybe a little "X" at the end of each row. They click the "X" and that particular result is gone.
I've googled this, but I don't know what I'm looking for. Send me in the right direction, please?
Here's what I've got, so you know what I'm looking for:
<script src="http://code.jquery.com/jquery-1.5.js"></script>
<form method="post" action="ajax.php" id="searchForm">
<input type="text" name="isbn" placeholder="Search..." />
<input class="myaccount" id="doSearch" name="doSearch" type="submit" value="Search" />
</form>
<form name="buyback" method="post" action="isbn.php">
<table id="result" class="myaccount" border=0 cellspacing=5 cellpadding=4>
<tr><td>
<strong>ISBN:</strong>
</td><td>
<strong>Price:</strong>
</td>{if $userlevel == 5}<td>
<strong>Full FCB Price</strong>
</td>{/if}
</tr>
</table>
<input name="doBuy" type="submit" value="Buy"><br>
</form>
<script>
// attach a submit handler to the form
$("#searchForm").submit(function(event) {
// stop form from submitting normally
event.preventDefault();
// get some values from elements on the page:
var $form = $( this ),
term = $form.find( 'input[name="isbn"]' ).val(),
//term = "isbn",
url = $form.attr( 'action' );
$.post( url, { doSearch: "Search", isbn: term } ,
function( data ) {
var content = $( data );
$( "#result" ).append( content );
}
);
});
</script>
EDIT:
Yes, it just returns data in this format:
<tr><td>
{$isbn}
<INPUT TYPE=hidden NAME="buy_isbn" VALUE="{$isbn}">
</td><td>
{$userPrice}
<INPUT TYPE=hidden NAME="buy_price" VALUE="{$userPrice}">
</td></tr>

Answer 1

This really depends on what type of html is returned by the ajax call. But you could wire up a .live() event that removes whatever you need to get rid of.
$('.removeItem').live('click', function(e) {
// remove whatever you want. maybe the previous element?
$(this).closest('tr').remove();
});
// clicking that link will remove everything returned by the ajax.php call
var content = $(data);
content.append("<a class='removeItem'>X</a>");
$("#result").append(content);
or you could just add the anchor into the results that are generated by your ajax.php file.
EDIT:
You could just use the live event and modify your html like this:
<tr><td>
{$isbn}
<INPUT TYPE=hidden NAME="buy_isbn" VALUE="{$isbn}">
</td><td>
{$userPrice}
<INPUT TYPE=hidden NAME="buy_price" VALUE="{$userPrice}">
</td><td>
X
</td></tr>