[EDIT] コース削除機能を追加しました。

src/main/resources/templates/select_course.html

@@ -17,9 +17,8 @@
 			<button type="submit">新規登録</button>
 		</form>
 
-
 	</th:block>
-	<form th:action="${mode == 'regist'} ? @{/user/register/return}: @{/change}" method="post">
+	<form th:action="${mode == 'regist'} ? @{/user/register/return}: @{/change}" id="totalForm" method="post">
 		<button type="submit" class="btn btn-primary w-100">確定</button>
 
 		<div class="accordion" id="accordionExample">
@@ -32,6 +31,8 @@
 						aria-controls="'collapse' + ${course.courseId}">
 						<span th:text="${course.courseName}"></span>
 					</button>
+					<p style="width: 120px;"><button type="button" class="btn btn-danger w-100"
+							th:attr="data-course-id=${course.courseId}" onclick="deleteCourse(this)">削除</button></p>
 				</h2>
 				<div th:id="'collapse' + ${course.courseId}" class="accordion-collapse collapse"
 					data-bs-parent="#accordionExample" style="padding-bottom: 120px;">
@@ -58,6 +59,43 @@
 		<div th:replace="~{footer :: footer}"></div>
 	</th:block>
 
+	<script th:inline="javascript">
+
+		const message = /*[[${message}]]*/ null;
+
+		if (message != null) {
+			alert(message);
+		}
+
+		function deleteCourse(button) {
+
+			const courseId = button.dataset.courseId;
+
+			const totalForm = document.getElementById("totalForm");
+
+			const input = document.createElement("input");
+
+			const radioButtons = totalForm.querySelectorAll('input[name="courseId"]');
+			radioButtons.forEach(radio => {
+				radio.disabled = true;
+			});
+
+			input.type = "hidden";
+			input.name = "courseId";
+			input.value = courseId;
+
+			totalForm.appendChild(input);
+
+			totalForm.action = "/course/delete";
+			totalForm.method = "post";
+			courseId.value = courseId;
+
+			totalForm.submit();
+		}
+
+
+	</script>
+
 	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js"></script>
 </body>