如何在点击时从购物车中删除商品？

时间：2018-12-05 10:04:41

标签： javascript html css onclick

我想知道如何制作它，以便在单击“ 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>

2 个答案:

答案 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>

相关问题
最新问题