在購物車頁面中,很多用戶需要批量刪除商品。這時候我們可以使用jQuery來快速實現批量刪除功能。
$(function(){ // 綁定單個商品刪除事件 $(".delete-btn").on("click", function(){ // $(this)為當前點擊的刪除按鈕 $(this).parent().parent().remove(); }); // 綁定批量刪除按鈕事件 $(".batch-delete-btn").on("click", function(){ // 獲取所有選中的復選框 var checkedItems = $(".cart-item-checkbox:checked").parent().parent(); // 遍歷所有選中的復選框,逐個刪除 checkedItems.each(function(){ $(this).remove(); }); }); });
首先,在頁面加載完成后,我們先綁定單個商品刪除事件。當用戶點擊單個商品的刪除按鈕時,我們先獲取當前點擊的按鈕所在的tr,并直接將其從DOM樹中刪除。
其次,我們綁定批量刪除按鈕事件。當用戶點擊批量刪除按鈕時,我們先獲取所有選中的復選框所在的tr。由于復選框可能會多選,所以我們需要使用each方法逐個遍歷選中的復選框,并將其從DOM樹中刪除。
以上就是使用jQuery實現購物車批量刪除的代碼實現。通過綁定事件,我們可以快速方便地實現購物車批量刪除功能,提高用戶的購物體驗。