jQuery是一款極為流行的JavaScript庫,能夠大大簡化客戶端腳本的操作流程。在該庫中,提供的刪除操作方法十分簡單而且非常方便。下面我們就來看看通過jQuery如何輕松地刪除數據。
//例如我們有一個表格,其中有一列是“刪除”按鈕。我們想通過該按鈕單擊事件,刪除對應行的數據。 //HTML結構 <table> <thead> <tr> <th>姓名</th> <th>年齡</th> <th>地址</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>張三</td> <td>25</td> <td>上海市</td> <td><button class="delete">刪除</button></td> </tr> <tr> <td>李四</td> <td>28</td> <td>北京市</td> <td><button class="delete">刪除</button></td> </tr> <tr> <td>王五</td> <td>23</td> <td>廣州市</td> <td><button class="delete">刪除</button></td> </tr> </tbody> </table> //jQuery腳本 $(function(){ $('.delete').click(function(){ $(this).parent().parent().remove(); }); });
以上代碼中,我們通過jQuery的選擇器先獲取到“刪除”按鈕的DOM對象,然后在其上進行單擊事件綁定。當按鈕被單擊時,我們使用parent()方法獲取到該按鈕的父級tr元素,再調用remove()方法刪除對應行的數據。整個過程非常簡單方便,只需幾行代碼就可以實現。