delete functionality

src/main/resources/templates/update-recipe.html

@@ -509,6 +509,46 @@ document.getElementById('publish-btn').addEventListener('click', async function(
     showMessage('Network error. Check console for details.', true);
   }
 });
+
+//delete function for button
+document.getElementById('delete-btn').addEventListener('click', async function (e) {
+  e.preventDefault();
+
+  if (!existingRecipe || !existingRecipe.id) {
+    showMessage("Recipe ID not found.", true);
+    return;
+  }
+
+  // confirm delete
+  const confirmDelete = confirm("Are you sure you want to delete this recipe?");
+  if (!confirmDelete) return;
+
+  try {
+    // CSRF (required by Spring Security)
+    const csrfToken = document.querySelector('meta[name="_csrf"]').getAttribute('content');
+    const csrfHeader = document.querySelector('meta[name="_csrf_header"]').getAttribute('content');
+
+    const response = await fetch(`/api/recipes/${existingRecipe.id}`, {
+      method: "DELETE",
+      headers: {
+        [csrfHeader]: csrfToken
+      },
+      credentials: "include"
+    });
+
+    const text = await response.text();
+
+    if (response.ok) {
+      showSuccessAndRedirect("Recipe deleted successfully!");
+    } else {
+      showMessage(text || "Failed to delete recipe.", true);
+    }
+
+  } catch (error) {
+    console.error("Delete error:", error);
+    showMessage("Network error while deleting recipe.", true);
+  }
+});
 </script>
 </body>
 </html>