【jQuery】ポップアップで確認してからデータを削除するには

1. リストにデータが一覧表示されている
2. 削除したデータの行にある削除ボタンを押す
3. 「本当に削除しますか？」と確認のポップアップが出る
4. 「はい」を押すと選んだ行だけ削除される

「ポップアップ」 というワンアクションを挟むのがなかなかネックだった。

動作の流れ

いろいろ考えたりはしたけど、やっぱり 「どういう順序で動作を進めると考えているものを実装できるのか」 と頭の中を整理するのが大事でした。

1. 削除したいデータの行の削除ボタン .deleteButton を押す：click()
2. 削除したい範囲（削除ボタンをのある行tr）を取得し、変数deleteMasterPartとする：parents()
3. ポップアップを表示する：Foundation6 "Reveal Modal"を使用
4. ポップアップ内の「はい」ボタン .toggleDelete を押す：click()
5. ポップアップ閉じる：Foundation6 "Reveal Modal"
6. deleteMasterPart を削除：remove()

コード

index.html

<!--ポップアップ-->
<div class="reveal" id="exampleModal1" data-reveal>
    <p>本当に削除しますか？</p>
    <button class="button toggleDelete" data-close style="margin-bottom: 0;">はい</button>
    <button class="close-button" data-close aria-label="Close modal" type="button">
        <span aria-hidden="true">&times;</span>
    </button>
</div>

<!--テーブル-->
<table>
    <thead>
        <tr>
            <th>商品コード</th>
            <th>商品名</th>
            <th>価格</th>
            <th>&nbsp;</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>A001</td>
            <td>りんご</td>
            <td>100円</td>
            <td><button class="button deleteButton" data-open="exampleModal1">削除</button></td>
        </tr>
        <tr>
            <td>A002</td>
            <td>バナナ</td>
            <td>198円</td>
            <td><button class="button deleteButton" data-open="exampleModal1">削除</button></td>
        </tr>
        <tr>
            <td>B001</td>
            <td>いちご</td>
            <td>398円</td>
            <td><button class="button deleteButton" data-open="exampleModal1">削除</button></td>
        </tr>
    </tbody>

common.js

$(function(){
    $(".deleteButton").on("click", function(){
        return deleteMasterPart = $(this).parents("tr");
    });

    $(".toggleDelete").on("click", function(){
            console.log("toggleDeleteおした");
         $(deleteMasterPart).remove();
    });
});