# やりたいこと

最終目標としては、Ajaxを使って一覧表示の削除ボタンを押すと、非同期でUI上からもDBから削除するできる機能を目指しています。  
その前段階として、jqueryのみでフロント側のみできる削除する機能を実装したいと考えています。  
さらにこの機能を実装する手段として、まずはボタンをクリックするとjs側で、一覧リストそれぞれのidを取得する必要があるのですが、ここに苦戦しています。

# 問題点

htmlのdata属性を作ってフロント側でidを取りたいのですが、クリックしても **リストの先頭のidしか取得することができません**  
どうすれば、laravel側で取ってきたリストのボタンにクリックするとそれぞれのidを取得することができるようになるでしょうか？アドバイスあればよろしくお願いします。

# コード

bladeファイル  
$songsはSongTableから十件取ってくるという処理です。フロント側の質問がメインになるのでこの変数のコードは割愛します。

```

    <table class="table table-striped">
     <thead>
      <tr>
       <th>タイトル</th>
      </tr>
     </thead>
     <tr>
      @foreach ($songs as $song)
      <div id="delete-item">
       <td class="align-middle">
        <a href="{{ route('admin.show',['id' => $song->id]) }}">
         {{ $song->title }}
        </a>
       </td>
       <td class="align-middle">
        // ここです
        <button id="delete-btn" data-id="{{ $song->id }}"　class="btn　btn-danger">削除</button>
       </td>
     </tr>
     </div>
     @endforeach
    </table>
    
```

```

    $(function() {
     $('#delete-btn').on("click", function() {
      console.log($('#delete-btn').data())
     });
    });
    
```
CC BY-SA 4.0
2021-01-23T15:46:08.437
73532
2023-01-08T09:07:15.953
2021-01-24T00:49:41.980
36424
36424
question
jquery laravel ajax
Laravel+jquery 一覧表示したデータのidをjsのコンソール側で取得できるようにしたい。
[JavaScript /
jQueryでtableの行を「追加」「削除」「移動」「変更」させる方法](https://mae.chab.in/archives/2146)

この記事を参考にして、フロントのみを削除できました。そもそも個別にid(class)を指定する必要はなかったみたいです。

```

    <button onclick="return confirm('本当に削除しますか？')"  class="btn btn-danger removeList">削除</button>
    
```

```

    $(document).on('click', '.removeList', function() {
        $(this)
          .parent()
          .parent()
          .remove();
      });
    
```
CC BY-SA 4.0
2021-01-24T01:28:31.790
73540
2021-01-24T07:29:45.837
2021-01-24T07:29:45.837
3060
36424
73532
answer