我想知道如何制作它,以便在单击“ x”按钮时,该商品将从购物车中消失?我对javascript不太熟悉,想知道是否有人可以帮助我找到解决方案?非常感谢您的回报!我将在下面提供到目前为止的代码。抱歉,如果有点混乱。
.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-q-c-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-q-c-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-q-c-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-q-c-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-q-c-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>
答案 0 :(得分:3)
您可以使用Document.querySelectorAll()
来获取类删除中的所有元素。然后使用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-q-c-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-q-c-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-q-c-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-q-c-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-q-c-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>
答案 1 :(得分:0)
我在此代码中添加了Jquery。如有任何问题,请通知我们。
$(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-q-c-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-q-c-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-q-c-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-q-c-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-q-c-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>