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

I'm running into a problem that I can't seem to solve. The code works great, but I need one more feature.

I'm using jQuery to return search results one at a time (multiple searches without reloading the page). But, I need the user to be able to close out of the search results they don't want without leaving the page and losing the other results.

The code consists of

1. isbn.tpl: input isbn number for search
2. ajax.php: gets results, returns results to:
3. ajax.tpl: displays results inside of isbn.tpl

I'm pretty sure this code will need to be inside of ajax.tpl. I need every row to have an "X" that will close that individual search result. The rest of the results stay. So, ajax.php generates a random string that starts with "isbn_", I use that tring in ajax.tpl in a situation. Then, the code could close anything with that unique id.

But, I don't know if that's the best way to do this, and I don't know how to do this.

isbn.tpl:

<script src="http://code.jquery.com/jquery-1.5.js"></script>
<form method="post" action="ajax.php" name="searchISBN" 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" 开发者_StackOverflow社区action="buy.php">
        <table id="result" class="search">
            <tr><td>
                <strong>Title</strong>
            </td><td>
                <strong>Author</strong>
            </td><td>
                <strong>ISBN</strong>
            </td><td>
                <strong>Price</strong>
            </td><td>
                <strong>Wholesale</strong>
            </td>
            </tr>
        </table>

        <br><br>

        <input name="doCalc" type="submit" value="Calculate">
        &nbsp;
        <input name="doCancel" type="submit" value="Cancel">

</form>

{literal}
<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_input = $form.find('input[name="isbn"]'),
term = $term_input.val(),
//term = "isbn",
url = $form.attr( 'action' );
    $.post( url, { doSearch: "Search", isbn: term } ,
        function( data ) {
            var content = $( data );

          $( "#result" ).append( content );
      }
    );
    $term_input.val('');
});

</script>
{/literal}

ajax.php (truncated):

/**
* Create random string for id="$string" in ajax
* This way, ajax can remove individual search results
* without reloading the page.
**/
$n = rand(10e16, 10e20);
$string = base_convert($n, 10, 36);
$string = "isbn_" . $string;


$smarty->assign('doSearch', $doSearch);
$smarty->assign('details', $details);
$smarty->assign('price', $price);
$smarty->assign('wholesale', $wholesale);
$smarty->assign('userWhole', $userWhole);
$smarty->assign('userPrice', $userPrice);
$smarty->assign('isbn', $isbn);
$smarty->assign('page', $page);
$smarty->assign('rate', $rate);
$smarty->assign('wrate', $wrate);
$smarty->assign('title', $title);
$smarty->assign('author', $author);
$smarty->assign('msg', $msg);
$smarty->assign('string', $string);
$smarty->display('ajax.tpl');

ajax.tpl:

{if $doSearch == "Search"}
        {if $price != NULL}
            <tr class="{$string}"><td>
                {$title}
            </td><td>
                {$author}
            </td><td>
                {$isbn}
            </td><td>
                <input type="text" name="{$isbn}" size="3" value="{$userPrice}"><br>
            </td><td>
                {$userWhole}
            </td></tr>
        {/if}
{/if}

Thank you for any and all help!!

Using CSS class names (and/or IDs) is a good way to go to identify data easily.

You can then use jQuery to hide the items you don't want in the results.

If you had a class of "isbn_xxxxxx" on an element, such as a TR, you can the remove it: $("isbn_xxxxxx").remove(), or hide it: $("isbn_xxxxxx").hide().

There are a number of ways to hook up the event, but you can easily place it inline as the onclick event.

The beauty is that using class names allows you to group things as well. You can have multiple classes for different purposes and jQuery makes it easy to manipulate the whole thing with little code.

EDIT:

<a href="javascript://" onclick="$('.{$string}').remove()">X</a>

Try adding in ajax.tpl:

<td><a href="javascript:" class="close_search">Close Search</a></td>

Then for the jQuery:

$('#result').delegate('.close_search', 'click', function() {
  $(this).closest('tr').hide();
});