tableのtrを削除したいのですが、うまくできないのでレクチャーいただければ幸いです。

Question

タイトル通りです。
クリックでconsole.log("Delete")は取れるのですが、tableの取り方がうまくいかなくて。

<table class="form-table-theme--1">
                            <thead class="has-background-thead">
                                <tr class="thead-mypage">
                                    <th>申請日</th>
                                    <th>承認日</th>
                                    <th>更新日</th>
                                    <th>有効期限</th>
                                    <th>登録<br>番号</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>2021/09/01 </td>
                                    <td>2020/09/01</td>
                                    <td>2020/09/01</td>
                                    <td>2024/09/30</td>
                                    <td>1290</td>
                                </tr>
                                                              <tr>
                                    <td>2021/09/01 </td>
                                    <td>2020/09/01</td>
                                    <td>2020/09/01</td>
                                    <td>2024/09/30</td>
                                    <td>1290</td>
                                </tr>
                                   <tr>
                                    <td>2021/09/01 </td>
                                    <td>2020/09/01</td>
                                    <td>2020/09/01</td>
                                    <td>2024/09/30</td>
                                    <td>1290</td>
                                </tr>
                                                              <tr>
                                    <td>2021/09/01 </td>
                                    <td>2020/09/01</td>
                                    <td>2020/09/01</td>
                                    <td>2024/09/30</td>
                                    <td>1290</td>
                                </tr>
                                                              <tr>
                                    <td>2021/09/01 </td>
                                    <td>2020/09/01</td>
                                    <td>2020/09/01</td>
                                    <td>2024/09/30</td>
                             <td> <button class="btn-delete">btn-delete</button></td>
                                </tr>
                            </tbody>
                        </table>
        <button class="btn-add">Add New</button>

const BtnAdd = document.querySelector(".btn-add");
const BtnDelete = document.querySelector(".btn-delete");
const DivContainer = document.getElementById("form-table-theme--1");

BtnAdd.addEventListener("click", AddNew);
BtnDelete.addEventListener("click", Delete);


function AddNew() {
   console.log("Add");
    const tr_element = document.createElement('tr')
    const parent_object = document.querySelector('tbody');
    tr_element.innerHTML = '<tr><td></td><td></td><td></td><td></td><td></td></tr>';
    parent_object.appendChild(tr_element);
}


function Delete() {
 //  tr.parentNode.removeChild(tr)
  console.log("Delete");

}

Answer 1

間違い投稿のため削除

Answer 2

どこのtrタグを消したいのか分からないのですが、全てのtrタグを消すなら

    function Delete() {
        var trs = document.getElementsByTagName('table')[0].getElementsByTagName('tr')
        while(trs.length>0) trs[0].parentNode.removeChild(trs[0]);
    }

Comments

[KKsall]

コードありがとうございます。実はAddNewで作られたtrタグが対象なのですが。
イメージとしてユーザーがボタンで追加、削除ボタンで任意に追加された項目削除できるイメージです。今のままですと全部のtrが消えてしまって
codepen
https://codepen.io/boo-jp/pen/oNeBQLK?editors=1111

[arutoi]

直近の追加されたtrタグを削除する感じでしたら、
https://codepen.io/Ireen/pen/JjyExZB

[KKsall]

ありがとうございます！これで解決できました！！

[KKsall]

度々すみません。こちら追加項目にDeleteボタンも表示されて削除できるようにするにはtarget.classListで変更すればいけますかね？

[arutoi]

質問の意味がよく分からないので、もう少し詳細を記載いただけますか。

[KKsall]

ご返信ありがとうございます。イメージ画像投稿しました。
addボタン押下でtr追加、そのなかに削除ボタンも含めてて、tr内の削除ボタン押下で追加されたtrを削除したいのです。

tableが複数あっても同様な動きも希望です。。追加も削除も１tableに対して対応できれば

table１
追加→tr＋削除ボタン→削除ボタン押下→s削除ボタン押下されたtr削除

table２
追加→tr＋削除ボタン→削除ボタン押下→s削除ボタン押下されたtr削除

codepen
https://codepen.io/boo-jp/pen/oNeBQLK

[arutoi]

追加するときに同時にtrタグにidを付与して、削除するときにそのidのtrに対して削除を行うのが良いかと思います。idは連番でtr-数字のように振れば良いかと。