【Laravel, JavaScript】foreach文の特定の繰り返しの全要素を削除したい

Question

前提・実現したいこと

Laravelにてforeach文を利用して動的なformの編集ページを作成しています。
実装したい内容は、
0. 既存の複数レコードをforeach文で表示
0. inputの内容を書き換えることができる
0. 特定のレコードを消したい場合は削除ボタンをクリックでそのレコードのみ削除できる

3の機能が実装できずに困っています。

例えば、
foreach文で４回繰り返されたとする。
→２回目の繰り返しの要素内のボタンをクリック。
→２回目の繰り返しの要素を全て削除

のようなイメージです。
現在のコードを下記の通りです。

該当のソースコード

        @foreach ($page_details as $page_detail)
        <div id="{{ $page_detail->id }}">          
            <div>
                <div>
                    <label for="chord">コード</label>
                    <!--↓このボタンをクリックしたら、この繰り返しの全要素を削除 -->
                    <button type="button" onclick="existRemoveInput()"　id="deleteId" data-name="{{ $page_detail->id }}">削除</button>
                </div>
                <input type="text" name="chord[]" value="{{ $page_detail->chord }}">
            </div>       
            <div>
                <div>
                    <label for="lyric">歌詞</label>
                </div>
                <input type="text" name="lyric[]" value="{{ $page_detail->lyric }}">
            </div>
        </div>
        @endforeach

    function existRemoveInput(){        
        const name = $('#deleteId').data();
        document.getElementById(name).remove();
    }

試したこと

やろうとしていることは、
0. ボタンクリックでexistRemoveInput()を実行
0. id="deleteId"のdataを取得
0. 2のdataと削除したい全要素であるdivのidに同じ数値が入るよう設定（　{{ $page_detail->id }}←この部分　）
0. divのidを指定してremove()で削除

このような考え方で実装しようとしていますが、うまく作動しません。

まずこの方法で解決しますでしょうか？
この方法が厳しければ他に良い方法を教えていただければ幸いです。
よろしくお願いします！

Answer 1

idは同一ページ内に重複不可です。
特にJavaScriptは正しく動きません。
今回の場合、同名クラスを振ってイベント発生した要素のdata属性を取得されては。

でも
onclick="existRemoveInput()"
関数指定してるならIDは直すとしてもdata属性つかわず、引数に直接対象のID入れれば良いのでは？

<button type="button" onclick="existRemoveInput('{{ $page_detail->id }}')"　id="deleteId_{{ $page_detail->id }}">削除</button>

function existRemoveInput(id){
    document.getElementById(id).remove();  

ただ、名称に数値始まりってNGだったような。
$page_detail->idが何を保持しているかによりますが。

Comments

[you3]

記載していただいたコードで解決しました！
ありがとうございます！
idの命名規則は数字から開始はダメでしたので、$page_detail->idの前に文字を入れました。（そのままの数字のみでも動きましたが、、、笑）

[m.ts10806]

解決されたようで何よりです。

＞（そのままの数字のみでも動きましたが、、、笑）

動くからそれでいい、だとたぶん何も改善されません。