HTMLでの削除操作に関するアラートの作成方法

1. 基本的なアラートの作成:

   <button onclick="confirmDelete()">削除</button>
   <script>
   function confirmDelete() {
   if (confirm("本当に削除しますか？")) {
   // 削除処理のロジックを追加
   }
   }
   </script>

2. カスタマイズされたアラートの作成:

   <button onclick="showCustomAlert()">削除</button>
   <script>
   function showCustomAlert() {
   var confirmation = document.createElement("div");
   confirmation.innerHTML = `
   <div style="background-color: lightblue; padding: 10px;">
     <p>本当に削除しますか？</p>
     <button onclick="deleteItem()">はい</button>
     <button onclick="closeAlert()">キャンセル</button>
   </div>
   `;
   document.body.appendChild(confirmation);
   }
   function deleteItem() {
   // 削除処理のロジックを追加
   closeAlert();
   }
   function closeAlert() {
   var confirmation = document.querySelector("div");
   document.body.removeChild(confirmation);
   }
   </script>

3. スタイルをカスタマイズしたアラートの作成:

   <button onclick="showStyledAlert()">削除</button>
   <style>
   .alert {
   background-color: lightblue;
   padding: 10px;
   border-radius: 5px;
   }
   .alert p {
   margin: 0;
   }
   .alert button {
   margin-top: 5px;
   }
   </style>
   <script>
   function showStyledAlert() {
   var confirmation = document.createElement("div");
   confirmation.classList.add("alert");
   confirmation.innerHTML = `
   <p>本当に削除しますか？</p>
   <button onclick="deleteItem()">はい</button>
   <button onclick="closeAlert()">キャンセル</button>
   `;
   document.body.appendChild(confirmation);
   }
   function deleteItem() {
   // 削除処理のロジックを追加
   closeAlert();
   }
   function closeAlert() {
   var confirmation = document.querySelector(".alert");
   document.body.removeChild(confirmation);
   }
   </script>

これらのコード例を使用すると、削除操作を実行する前にユーザーに確認を求めるアラートを作成できます。コードをカスタマイズしてデザインや動作を変更することもできます。