购物车的简单实现

<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
       width: 100%;
       background-color: #f5f5f5;
    }
  ul,li{
         
        list-style: none;
    }
   #list ul{
        display: flex;
        justify-content: space-around;
    }
    #list li{
        position: relative;
        width: 20%;
        box-sizing: border-box;
        text-align: center;
        border: 1px solid #cecece;
        background-color: #fff;
    }
    #list li p:nth-of-type(2){
        color: orangered;
        margin-bottom: 20px;
    }
    #list li p:nth-of-type(3){
        color: #cecece;
        font-size: 14px;
    }
    #list li p:last-child{
        width: 200px;
        height: 60px;
        background-color: orangered;
        line-height: 60px;
        position: absolute;
        bottom: 0;
        left:calc(50% - 100px) ;
       opacity: 0;
       color: #fff;
       font-size: 20px;
       cursor: pointer;
    }
    #list li p:last-child:hover{
       opacity: 1;
    }
    img{
        width: 200px;
        height: 200px;
    }
  
    #box{
        margin-top: 100px;
        width: 100%;
        text-align: left;
        background-color: #fff;
    }
    #box ul{
      
        width: 100%;
    }
    #box li{
       width: 100%;
       display: flex;
       height: 80px;
       line-height: 80px;
       justify-content: space-around;
       border-bottom: 1px solid #cecece;
    }
    #box img{
        width: 50px;
        height: 50px;
        vertical-align: middle;
        margin-top: 15px;
    }
    #box p{
        width: 100%;
        height: 60px;
        position: relative;
        line-height: 60px;
        border-bottom: 1px solid #cecece;
    }
  #box p span{
    display: inline-block;
  position: absolute;
   width: 250px;
   text-align: center;
  } 
  #box li span{
    display: inline-block;
    width: 250px;
    
  }
#box p span:nth-of-type(1){
    left: 296px;
}
#box p span:nth-of-type(2){
    left: 762px;
}
#box p span:nth-of-type(3){
   right: 17px;
}
#box li span:nth-of-type(2){
    color: orangered;
}
#delete li span:last-child{
    cursor: pointer;
    width: 50px;
    text-align: center;
}
    
</style>

•         <li></li>
          <li></li>
          <li></li>
          <li></li>
      </ul>
  </div>
  <div id="box">
      <p>
          <span>商品名称</span>
          <span>单价</span>
          <span>操作</span>
      </p>
      <ul id="delete"></ul>
  </div>
  <script src="add.js"></script>
  <script>
   /*  删除 */
  
     document.onclick=()=>{
      let aDelete1=document.querySelectorAll(".delete1");
      console.log(aDelete1);
      aDelete1.forEach((item) => {
      item.onclick = () => {
        //要确定点击商品的id
        console.log(1);
        let pid = item.getAttribute("id");
        cart.deleteData(pid);
      
        cart.showList("box");
      }; 
    })
     }
   
  </script>