削除ボタンは、残りの行にない最初の行にのみ作用します

Question

配列から値（カードの詳細）を取り出してhtmlテーブルに入れました。特定のカードを削除するための削除ボタンも追加しました。

これをajaxで削除します。最初の行の削除ボタンをクリックすると、完全に機能しますが、2行目または3行目の他の削除ボタンをクリックすると、アクションはありません。

この問題を解決する正しい方法を提案してください。ここでは、事前

で

おかげで、削除ボタンにクラスを与えるとidと、そのクラスにイベントをバインドする必要がない私のコード

  <tr> 
         <td><?php echo $val['last4'];?></td> 
         <td><?php echo $val['exp_month'];?></td> 
         <td><?php echo $val['exp_year'];?></td> 
         <td><button id = "del">Delete</button></td> 
        </tr> 

Ajax part 


<script src="//code.jquery.com/jquery-1.12.0.min.js"></script> 
    <script>       
     $('#del').click(function() { 
     //var a=document.getElementById("").value; 
     var val0 = $('#id').val(); 
     var val01 = $('#cust').val(); 

     var fade = document.getElementById("fade");   

     var show = function(){ 
     fade.style.display = "block"; 
     } 

     show(); 
     $.ajax({ 
     type: 'POST', 
     url: 'mywebsite.com/deleting.php', 
     data: { card_id: val0,cust_id: val01 }, 
     success: function(response) { 
     fade.style.display = "none"; 
     // alert(response); 
     mystring = response.replace(/^\s+|\s+$/g, ""); 
     $('#result11').html(mystring); 

     } 
     }); 
     }); 
    </script> 

Answer 1

あなたのボタンには同じIDがあります。 IDはHTML文書内で一意でなければならず、複数の要素間で共有することはできません。 Read more about the html id attribute

変更の代わりにクラスを使用するには、ボタン：

<td><button class="del">Delete</button></td> 

そして、代わりにそのクラスにバインドするためにあなたのjQueryを変更します。

$('.del').click(function(e) { 
    // Since we're using ajax for this, stop the default behaviour of the button 
    e.preventDefault(); 

    // Get the value from the clicked button 
    var val0 = $(this).val(); 

私はまた、関数呼び出しでイベントeを追加し、ボタンがクリックされるとボタンのデフォルトの動作（フォームを送信する）が停止されました。

Answer 2

です。次に、バインド関数でその行要素から値を選択し、Ajaxに渡します。