【保存版】削除前に確認ダイアログを表示する方法3選！JavaScript & HTML & ライブラリ

2024-06-14

JavaScriptとHTMLで削除前に確認メッセージを表示する方法

必要なもの

HTMLファイル
JavaScriptファイル

手順

HTMLで削除ボタンを作成する

<button onclick="deleteConfirm()">削除</button>

上記のコードは、deleteConfirm()というJavaScript関数が呼び出されるように、onclickイベントにdeleteConfirm()関数を割り当てた削除ボタンを作成します。

JavaScriptで確認メッセージを表示する

function deleteConfirm() {
  var result = confirm("本当に削除しますか？");
  if (result) {
    // 削除処理を実行
    alert("削除しました！");
  } else {
    // 削除をキャンセル
    alert("削除を中止しました。");
  }
}

上記のコードは、deleteConfirm()関数内に確認メッセージを表示するconfirm()メソッドを呼び出しています。confirm()メソッドは、ユーザーにメッセージと「OK」と「キャンセル」ボタンを表示し、どちらが選択されたかを返します。

ユーザーが「OK」を選択した場合、result変数にtrueが格納されます。

result変数の値に基づいて、削除処理を実行するかキャンセルするかを分岐させています。

補足

confirm()メソッドのメッセージ部分は、自由に編集することができます。
削除処理の部分は、実際に削除を行う処理に置き換えてください。
より洗練されたデザインにするには、モーダルダイアログなどを利用することもできます。

この例を参考に、削除前に確認メッセージを表示する機能を実装してみてください。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>削除確認</title>
</head>
<body>
  <p>削除したいデータ: データ1</p>
  <button onclick="deleteConfirm()">削除</button>

  <script src="script.js"></script>
</body>
</html>

JavaScript (script.js)

function deleteConfirm() {
  var result = confirm("このデータを削除しますか？\n\n削除後、データは復元できません。");
  if (result) {
    alert("削除しました！");
    // ここに実際の削除処理を記述
  } else {
    alert("削除を中止しました。");
  }
}

説明

HTMLファイルでは、削除したいデータと削除ボタンを作成しています。
JavaScriptファイルでは、deleteConfirm()関数を定義しています。この関数は、confirm()メソッドを使用して確認メッセージを表示し、ユーザーの選択に基づいて処理を分岐させています。
confirm()メソッドのメッセージ部分は、削除するデータの情報などを含めてわかりやすく編集してください。
実際の削除処理は、// ここに実際の削除処理を記述の部分に記述する必要があります。

このコードはあくまで一例であり、状況に合わせて自由に改変することができます。

削除前に確認メッセージを表示するその他の方法

SweetAlert2などのライブラリを使用する

SweetAlert2は、モーダルダイアログを簡単に作成できるJavaScriptライブラリです。削除確認メッセージを表示するのに適したライブラリの一つです。

https://github.com/sweetalert2/sweetalert2

BootstrapなどのCSSフレームワークには、モーダルダイアログなどのコンポーネントが用意されています。これらのコンポーネントを利用して、削除確認メッセージを表示することができます。

https://getbootstrap.com/

jQueryを使用する

jQueryは、JavaScriptライブラリのひとつであり、DOM操作を簡単に記述することができます。jQueryを使用して、削除確認メッセージを表示するダイアログを作成することができます。

https://jquery.com/download/

それぞれの方法のメリットとデメリット

方法	メリット	デメリット
JavaScriptとHTML	シンプルでわかりやすい	デザインが限られる
SweetAlert2	モーダルダイアログを簡単に作成できる	ライブラリの追加が必要
Bootstrap	デザインに統一感を持たせられる	フレームワークの知識が必要
jQuery	DOM操作を簡単に記述できる	ライブラリの追加が必要