如何在点击时从购物车中删除商品？
[英]How to remove item from cart on click?
问题描述
I was wondering how to make it so that when the "x" button is clicked, the item will disappear from the cart? 
我想知道如何做到这一点，以便在单击“ x”按钮时，该商品将从购物车中消失？ I'm not too familiar with javascript and was wondering if anyone can help me find a solution to this? 我对javascript不太熟悉，想知道是否有人可以帮助我找到解决方案？ Thank you very much in return! 非常感谢您的回报！ I will provide the code I have so far down below. 我将在下面提供到目前为止的代码。 Sorry if it's a little messy. 抱歉，如果有点混乱。
.cart { margin: 0 auto; width: 70%; } .items { display: block; vertical-align: middle; border-bottom: 1px solid #fafafa; padding: 20px; } .even { background: #fbf7e6; } .infoWrap { display: table; width: 100%; } .cartSection { display: table-cell; vertical-align: middle; } .infoWrap h3 { font-size: 20px; font-weight: 600; font-family: 'Open Sans', sans-serif; } .infoWrap p { display: inline-block; font-size: 15px; color: #717171; font-family: 'Open Sans', sans-serif; } .prodTotal p { font-family: 'Open Sans', sans-serif; font-size: 1.25em; } input.qty { width: 2em; text-align: center; font-size: 1em; padding: .25em; margin: 1em .5em 0 0; } .items Img { float: left; max-width: 100px; display: inline; padding-right: 1em; } .remove .fa-times { font-size: 15px; padding: 5px; } a.remove { text-decoration: none; color: #ffffff; font-weight: bold; background: #717171; display: inline-block; border-radius: 100%; line-height: .80; } a.remove:hover { background: #e84c40; } /* TOTAL */ .checkoutalign { margin: 0 auto; text-align: center; width: 70%; background-color: #fbf7e6; padding: 30px 0px 30px 0px; } .subtotalcf { width: 90%; display: inline-block; } .total1 { float: left; } .total1 p { text-align: left; line-height: 1.6em; font-size: 16px; } .total2 { float: right; } .total2 p { text-align: right; line-height: 1.6em; font-size: 16px; } .totalbold p { font-family: 'Open Sans', sans-serif; font-weight: 800; font-size: 20px; }
<html class="no-js"> <head> <meta charset="UTF-8" /> <!--Don't forget to fill these out!--> <title></title> <meta name="description" content="Description for site goes here." /> <!--Links to the main Style Sheet--> <link href="style.css" rel="stylesheet" type="text/css" /> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <!--Links to a modernizer JavaScript file that fixes a lot of issues with old browsers--> <script src="js/modernizr.js"></script> <!--Makes the site so it won't scale down on small devices --> <meta name="viewport" content="width=device-width, initial-scale=1" /> </head> <body> <div class="wrap cf"> <div class="cart"> <ul class="cartWrap"> <li class="items even"> <div class="infoWrap"> <div class="cartSection info"> <img src="http://lorempixel.com/output/technics-qc-300-300-4.jpg" alt="" class="itemImg" /> <h3>Grape</h3> <p> <input type="text" class="qty" placeholder="1" /> x $2.00</p> </div> <div class="prodTotal cartSection"> <p>$2.00</p> </div> <div class="cartSection removeWrap"> <a href="#" class="remove"><i class="fa fa-times"></i></a> </div> </div> </li> <li class="items odd"> <div class="infoWrap"> <div class="cartSection"> <img src="http://lorempixel.com/output/technics-qc-300-300-4.jpg" alt="" class="itemImg" /> <h3>Orange</h3> <p> <input type="text" class="qty" placeholder="3" /> x $2.00</p> </div> <div class="prodTotal cartSection"> <p>$6.00</p> </div> <div class="cartSection removeWrap"> <a href="#" class="remove"><i class="fa fa-times"></i></a> </div> </div> </li> <li class="items even"> <div class="infoWrap"> <div class="cartSection"> <img src="http://lorempixel.com/output/technics-qc-300-300-4.jpg" alt="" class="itemImg" /> <h3>Apple</h3> <p> <input type="text" class="qty" placeholder="2" /> x $2.00</p> </div> <div class="prodTotal cartSection"> <p>$4.00</p> </div> <div class="cartSection removeWrap"> <a href="#" class="remove"><i class="fa fa-times"></i></a> </div> </div> </li> <li class="items odd"> <div class="infoWrap"> <div class="cartSection"> <img src="http://lorempixel.com/output/technics-qc-300-300-4.jpg" alt="" class="itemImg" /> <h3>Pineapple</h3> <p> <input type="text" class="qty" placeholder="4" /> x $2.00</p> </div> <div class="prodTotal cartSection"> <p>$8.00</p> </div> <div class="cartSection removeWrap"> <a href="#" class="remove"><i class="fa fa-times"></i></a> </div> </div> </li> <li class="items even"> <div class="infoWrap"> <div class="cartSection info"> <img src="http://lorempixel.com/output/technics-qc-300-300-4.jpg" alt="" class="itemImg" /> <h3>Raspberry</h3> <p> <input type="text" class="qty" placeholder="3" /> x $2.00</p> </div> <div class="prodTotal cartSection"> <p>$6.00</p> </div> <div class="cartSection removeWrap"> <a href="#" class="remove"><i class="fa fa-times"></i></a> </div> </div> </li> </ul> </div> </div> </body> </html>
2 个解决方案
解决方案1
3 已采纳 2018-12-05 10:11:23
You can use Document.querySelectorAll() to get all the elements with class remove . 您可以使用Document.querySelectorAll()获取所有带有remove类的元素。 Then use forEach() to loop through all of them to attach the function to remove the closest li element: 然后使用forEach()遍历所有元素以附加功能以删除最接近的li元素：
document.querySelectorAll('.remove').forEach(function(el){ el.addEventListener('click', function(){ this.closest('li').remove(); }); });
.cart { margin: 0 auto; width: 70%; } .items { display: block; vertical-align: middle; border-bottom: 1px solid #fafafa; padding: 20px; } .even { background: #fbf7e6; } .infoWrap { display: table; width: 100%; } .cartSection { display: table-cell; vertical-align: middle; } .infoWrap h3 { font-size: 20px; font-weight: 600; font-family: 'Open Sans', sans-serif; } .infoWrap p { display: inline-block; font-size: 15px; color: #717171; font-family: 'Open Sans', sans-serif; } .prodTotal p { font-family: 'Open Sans', sans-serif; font-size: 1.25em; } input.qty { width: 2em; text-align: center; font-size: 1em; padding: .25em; margin: 1em .5em 0 0; } .items Img { float: left; max-width: 100px; display: inline; padding-right: 1em; } .remove .fa-times { font-size: 15px; padding: 5px; } a.remove { text-decoration: none; color: #ffffff; font-weight: bold; background: #717171; display: inline-block; border-radius: 100%; line-height: .80; } a.remove:hover { background: #e84c40; } /* TOTAL */ .checkoutalign { margin: 0 auto; text-align: center; width: 70%; background-color: #fbf7e6; padding: 30px 0px 30px 0px; } .subtotalcf { width: 90%; display: inline-block; } .total1 { float: left; } .total1 p { text-align: left; line-height: 1.6em; font-size: 16px; } .total2 { float: right; } .total2 p { text-align: right; line-height: 1.6em; font-size: 16px; } .totalbold p { font-family: 'Open Sans', sans-serif; font-weight: 800; font-size: 20px; }
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <div class="wrap cf"> <div class="cart"> <ul class="cartWrap"> <li class="items even"> <div class="infoWrap"> <div class="cartSection info"> <img src="http://lorempixel.com/output/technics-qc-300-300-4.jpg" alt="" class="itemImg" /> <h3>Grape</h3> <p> <input type="text" class="qty" placeholder="1"/> x $2.00</p> </div> <div class="prodTotal cartSection"> <p>$2.00</p> </div> <div class="cartSection removeWrap"> <a href="#" class="remove"><i class="fa fa-times"></i></a> </div> </div> </li> <li class="items odd"> <div class="infoWrap"> <div class="cartSection"> <img src="http://lorempixel.com/output/technics-qc-300-300-4.jpg" alt="" class="itemImg" /> <h3>Orange</h3> <p> <input type="text" class="qty" placeholder="3"/> x $2.00</p> </div> <div class="prodTotal cartSection"> <p>$6.00</p> </div> <div class="cartSection removeWrap"> <a href="#" class="remove"><i class="fa fa-times"></i></a> </div> </div> </li> <li class="items even"> <div class="infoWrap"> <div class="cartSection"> <img src="http://lorempixel.com/output/technics-qc-300-300-4.jpg" alt="" class="itemImg" /> <h3>Apple</h3> <p> <input type="text" class="qty" placeholder="2"/> x $2.00</p> </div> <div class="prodTotal cartSection"> <p>$4.00</p> </div> <div class="cartSection removeWrap"> <a href="#" class="remove"><i class="fa fa-times"></i></a> </div> </div> </li> <li class="items odd"> <div class="infoWrap"> <div class="cartSection"> <img src="http://lorempixel.com/output/technics-qc-300-300-4.jpg" alt="" class="itemImg" /> <h3>Pineapple</h3> <p> <input type="text" class="qty" placeholder="4"/> x $2.00</p> </div> <div class="prodTotal cartSection"> <p>$8.00</p> </div> <div class="cartSection removeWrap"> <a href="#" class="remove"><i class="fa fa-times"></i></a> </div> </div> </li> <li class="items even"> <div class="infoWrap"> <div class="cartSection info"> <img src="http://lorempixel.com/output/technics-qc-300-300-4.jpg" alt="" class="itemImg" /> <h3>Raspberry</h3> <p> <input type="text" class="qty" placeholder="3"/> x $2.00</p> </div> <div class="prodTotal cartSection"> <p>$6.00</p> </div> <div class="cartSection removeWrap"> <a href="#" class="remove"><i class="fa fa-times"></i></a> </div> </div> </li> </ul> </div> </div>
解决方案2
0 2018-12-05 10:16:26
I have added Jquery in this code. 我在此代码中添加了Jquery。 any problem please let us know. 如有任何问题，请通知我们。
$(document).ready(function(e) { $('.remove').on('click', function(){ $(this).closest(".items").remove(); }); });
.cart { margin: 0 auto; width: 70%; } .items { display: block; vertical-align: middle; border-bottom: 1px solid #fafafa; padding: 20px; } .even { background: #fbf7e6; } .infoWrap { display: table; width: 100%; } .cartSection { display: table-cell; vertical-align: middle; } .infoWrap h3 { font-size: 20px; font-weight: 600; font-family: 'Open Sans', sans-serif; } .infoWrap p { display: inline-block; font-size: 15px; color: #717171; font-family: 'Open Sans', sans-serif; } .prodTotal p { font-family: 'Open Sans', sans-serif; font-size: 1.25em; } input.qty { width: 2em; text-align: center; font-size: 1em; padding: .25em; margin: 1em .5em 0 0; } .items Img { float: left; max-width: 100px; display: inline; padding-right: 1em; } .remove .fa-times { font-size: 15px; padding: 5px; } a.remove { text-decoration: none; color: #ffffff; font-weight: bold; background: #717171; display: inline-block; border-radius: 100%; line-height: .80; } a.remove:hover { background: #e84c40; } /* TOTAL */ .checkoutalign { margin: 0 auto; text-align: center; width: 70%; background-color: #fbf7e6; padding: 30px 0px 30px 0px; } .subtotalcf { width: 90%; display: inline-block; } .total1 { float: left; } .total1 p { text-align: left; line-height: 1.6em; font-size: 16px; } .total2 { float: right; } .total2 p { text-align: right; line-height: 1.6em; font-size: 16px; } .totalbold p { font-family: 'Open Sans', sans-serif; font-weight: 800; font-size: 20px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrap cf"> <div class="cart"> <ul class="cartWrap"> <li class="items even"> <div class="infoWrap"> <div class="cartSection info"> <img src="http://lorempixel.com/output/technics-qc-300-300-4.jpg" alt="" class="itemImg" /> <h3>Grape</h3> <p> <input type="text" class="qty" placeholder="1"/> x $2.00</p> </div> <div class="prodTotal cartSection"> <p>$2.00</p> </div> <div class="cartSection removeWrap"> <a href="#" class="remove"><i class="fa fa-times"></i></a> </div> </div> </li> <li class="items odd"> <div class="infoWrap"> <div class="cartSection"> <img src="http://lorempixel.com/output/technics-qc-300-300-4.jpg" alt="" class="itemImg" /> <h3>Orange</h3> <p> <input type="text" class="qty" placeholder="3"/> x $2.00</p> </div> <div class="prodTotal cartSection"> <p>$6.00</p> </div> <div class="cartSection removeWrap"> <a href="#" class="remove"><i class="fa fa-times"></i></a> </div> </div> </li> <li class="items even"> <div class="infoWrap"> <div class="cartSection"> <img src="http://lorempixel.com/output/technics-qc-300-300-4.jpg" alt="" class="itemImg" /> <h3>Apple</h3> <p> <input type="text" class="qty" placeholder="2"/> x $2.00</p> </div> <div class="prodTotal cartSection"> <p>$4.00</p> </div> <div class="cartSection removeWrap"> <a href="#" class="remove"><i class="fa fa-times"></i></a> </div> </div> </li> <li class="items odd"> <div class="infoWrap"> <div class="cartSection"> <img src="http://lorempixel.com/output/technics-qc-300-300-4.jpg" alt="" class="itemImg" /> <h3>Pineapple</h3> <p> <input type="text" class="qty" placeholder="4"/> x $2.00</p> </div> <div class="prodTotal cartSection"> <p>$8.00</p> </div> <div class="cartSection removeWrap"> <a href="#" class="remove"><i class="fa fa-times"></i></a> </div> </div> </li> <li class="items even"> <div class="infoWrap"> <div class="cartSection info"> <img src="http://lorempixel.com/output/technics-qc-300-300-4.jpg" alt="" class="itemImg" /> <h3>Raspberry</h3> <p> <input type="text" class="qty" placeholder="3"/> x $2.00</p> </div> <div class="prodTotal cartSection"> <p>$6.00</p> </div> <div class="cartSection removeWrap"> <a href="#" class="remove"><i class="fa fa-times"></i></a> </div> </div> </li> </ul> </div> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何从购物车中删除一件商品？ - How to remove one item from cart?
如何删除购物车中添加的项目？ - how to remove added item in cart?
如何在不删除相等的情况下从购物车中删除相等的项目？ - How to remove an equal item from the cart without deleting an equal?
如何从 Firestore 中删除您单击的项目？ - How to remove the item you click on from the Firestore?
将PHP与Javascript结合使用可以从购物车中删除商品 - Combine PHP with Javascript to remove item from cart
从购物车反应 js 中删除项目 - Remove item from shopping cart react js
如何在 redux reducer 中删除购物车项目？ - How do remove cart item in redux reducer?
如何在简单的购物车中创建“删除商品”按钮？ - How to creat a 'remove item' button in simple cart?
如何从购物车中删除产品 - How to remove product from cart
通过单击从数组中删除项目 - Remove item from array by click
相关标签