リストのjquery削除ボタンはすべてのボックスには適用されません

Question

各liには削除ボタンが含まれており、クリックすると削除されます。私は理由は分かりませんが、ボタンはリスト内の最初の項目にしか適用できませんが、残りのLIボックスには適用できません。私が間違ってしまった場所は不思議です。

次は私のPHPコードのスクリプトとJavaScript

foreach($biz_watchlist as $biz_watchlist1){ 
    echo '<li class="biz_watch">'; 
    echo '<table style="width:100%">'; 
    echo '<td style="width:50%">'; 
    echo $biz_watch_details['5']; 
    echo ' | <a id="remove_watch">remove</a>'; 
    echo '</td>'; 
    echo '<td>'; 
    echo '<span style="float:right">'.$biz_watch_details['19'].'</span>'; 
    echo '</td>'; 
    echo '</table>'; 
    echo '</li>'; 
} 

    <script type="text/javascript"> 
    $(document).ready(function(){ 
    $('#remove_watch').click(function(){ 
     $(this).closest('.biz_watch').fadeOut("slow"); 
    }); 
    }); 
    </script> 

Answer 1

$('#remove_watch')は、IDを探しています。つまり、最初のオブジェクトに対してのみ結果が得られます。 idは一意である必要があります。複数の場所でそれをしたい場合は、代わりにクラスに変更してください。

echo ' | <a id="remove_watch">remove</a>'; 

はあなたがページN回に繰り返している要素のIDを使用している

echo ' | <a class="remove_watch">remove</a>'; 

、その後

$('.remove_watch').click(function(){ 

Answer 2

する必要があります！ W3C HTML仕様に従って、IDは一意でなければなりません。同じIDを持つ要素を複数持つことはできません。そうした場合、これらの要素に対する操作は定義されていません。つまり、このシナリオでは各ブラウザの動作が異なります。

代わりに、繰り返しのある要素に対してクラスを使用してください。クラス属性はグループ化操作のためのものです。

$('.remove_watch').click(function(){ 
    $(this).closest('.biz_watch').fadeOut("slow"); 
}); 


<a class="remove_watch">remove</a>