jQuery/AJAX検索結果を追加する - 結果を1つだけクリアするにはどうすればよいですか？

Question

私は解決できないような問題に遭遇しています。コードは素晴らしいですが、私はもう一つの機能が必要です。

私は、一度に1つずつ検索結果を返すためにjQueryを使用しています（ページを再読み込みせずに複数回検索）。しかし、私は、ユーザーが、ページを離れて他の結果を失うことなく、望ましくない検索結果から閉じることができるようにする必要があります。 、結果を取得する 結果を返す： 検索

ajax.phpの入力ISBN番号：

コードは

1. isbn.tplから成る
2. ajax.tpl： の結果を表示します。isbn.tpl

私はこのコードがajax.tplの内部にある必要があると確信しています。個々の検索結果を閉じる「X」があるためには、すべての行が必要です。残りの結果は残ります。だから、ajax.phpは "isbn_"で始まるランダムな文字列を生成します。私はその状況でajax.tplでその文字列を使用します。次に、コードはその一意のIDで何かを閉じることができます。

しかし、これが最良の方法であるかどうかはわかりませんが、これを行う方法はわかりません。

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" 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：

/** 
* 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} 

は、任意およびすべてのヘルプをありがとう！

Answer 1

CSSクラス名（および/またはID）を使用すると、簡単にデータを識別することができます。

jQueryを使用して、結果に不要な項目を非表示にすることができます。

エレメントに「isbn_xxxxxx」というクラスがある場合（TRなど）、削除することができます：$("isbn_xxxxxx").remove()、またはそれを非表示にする：$("isbn_xxxxxx").hide()。

イベントを接続する方法はいくつかありますが、onclickイベントとしてインラインで簡単に配置できます。

クラス名を使用すると、グループ化することもできます。さまざまな目的のために複数のクラスを持つことができ、jQueryは小さなコードで全体を簡単に操作できます。

EDIT：

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

Answer 2

がアヤックスに追加してみてください。TPL：

jQueryのためのその後

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

：

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