增刪改查，咱們這篇文章來介紹一下如何進行刪除表單的操做，也就是咱們頁面中的刪除按鈕的功能。html
下邊寫的可能看起來有點亂，請仔細的一步一步完成。web
刪除功能第一步，按鈕功能實現
1. html的改變
來看，咱們最初，刪除按鈕是一個button的標籤後端
<button class="btn btn-sm btn-danger">刪除</button>
想要讓它實現刪除功能，首先要肯定的是，刪除的是一個表單記錄，就是這個用戶的表單信息。那麼，咱們來添加一個表單的刪除功能，並且是delete請求的，參照以前的put請求：app
<form th:action="@{/emp/}+${emp.id}" method="post"> <input type="hidden" name="_method" value="delete"/> <button type="submit" class="btn btn-sm btn-danger">刪除</button>
</form>
如上，咱們就把刪除功能在HTML上修改好了，而後是一個control方法post
2. LoginController的中刪除用戶的功能添加：
// 刪除員工 @DeleteMapping("/emp/{id}") public String deleteEmployee(@PathVariable("id") Integer id) { employeeDao.delete(id); return "redirect:/emps"; }
3. 先後端的代碼，咱們寫好了，來看下效果：（圖1：刪除前。 圖2：刪除後）優化
是否是以爲哪裏有點彆扭，沒錯，右邊的按鈕從橫排變成了豎排，由於咱們刪除表單的操做，是增長了一個form，使得這裏變得過於厚重，每個刪除按鈕都是一個表單的形式展示，因此，咱們須要來優化一下。this
HTML優化-加入js
直接來看咱們要作怎樣的優化。spa
1. 首先，將form表單從按鈕那裏拿出來：（圖1，是拿出來的 圖2，是原位置）
注意，咱們提交刪除表單的時候，是點擊刪除按鈕，可form拿出去就不生效了，怎麼辦？翻譯
2. 咱們這裏使用js的寫法，將這個功能實現：
2.1 記得將引入的樣式都用th：的形式注入；code
2.2 我來講明一下，代碼修改的步驟：
2.2.1 首先，爲了在js中對刪除這個按鈕作操做，咱們在class中加一個屬性值，我這裏起名叫：deleteBtn
class="btn btn-sm btn-danger deleteBtn">刪除</button>
而後寫出js-jQuery：
（記得引出jQuery的webJars，「.xx」表示對這個class作操做，什麼操做呢？click，click一個事件function，返回一個fasle是爲了取消這個按鈕的默認行爲。既然取消了按鈕的行爲，那麼上邊按鈕的type也要刪除掉）
2.2.2 其次，js中並不認識咱們th模板中的那些路徑拼接，因此咱們要這樣自定義一下： th:attr("xxxx")
咱們再對fom這裏作一個操做，加一個id，用來識別這個標籤；
2.2.3 最後，來看這下邊的是什麼意思：#引用id，而後引用自定義的操做實現一個動做，動做的value是 $(this).attr("del_uri)).submit();【這個按鈕 的 觸發這個路徑拼接 的 提交】 ，是否是這樣中文式的英文翻譯，看代碼就相對好理解了呢？
而後在頁面中點擊刪除，就能夠完成了。