在使用jQuery實現(xiàn)購物車功能時,刪除按鈕是一個重要的組成部分。可以使用以下代碼實現(xiàn)一個簡單的刪除功能:
$(document).on("click", ".delete-btn", function(){ $(this).closest(".item").remove(); });
上述代碼首先使用事件委托的方式綁定了一個點擊事件,當(dāng)用戶點擊某個刪除按鈕時,代碼將會查找到對應(yīng)的商品項,并將其從DOM中移除。
需要注意的是,這里使用了closest()方法來查找最近的包含class為item的祖先元素,這是因為購物車中每個商品項都有可能包含有自己的刪除按鈕,而我們只想移除當(dāng)前用戶點擊的那個商品項。
為了使代碼更加靈活,我們還可以將刪除按鈕的類名和商品項的類名都定義為變量,以便于在需要時進行修改。
var itemClass = ".item"; var deleteBtnClass = ".delete-btn"; $(document).on("click", deleteBtnClass, function(){ $(this).closest(itemClass).remove(); });
這樣,我們就可以根據(jù)實際情況調(diào)整類名,實現(xiàn)任意數(shù)量的商品項和刪除按鈕。