废话不多说，直接上代码。
CSS文件：cartStyle.css
body,ul,li,div,p,h1,h2,ol{margin:0;padding: 0;}
body{margin: 5px 0 0 0}
ul,li,ol{list-style: none;}
.content{width: 680px; margin: 0 auto; font-family: "微软雅黑"; border: solid 1px #cecece; padding: 5px;}
.logo{margin: 10px 0;}
.logo span{
display: inline-block;
float: right;
width: 60px;
height: 30px;
line-height: 30px;
font-size: 14px;
background: #ff0000;
color: #ffffff;
text-align: center;
border-radius: 10px;
margin-top: 5px;
margin-right: 10px;
cursor: pointer;
font-weight: bold;
}
.cartList{
overflow: hidden;
}
.cartList ul{
clear: both;
width: 100%;
overflow: hidden;
border-bottom: 1px #c6c6c6 dashed;
padding-top: 6px;
}
.cartList ul li img{width: 60px;
}
.cartList ul li{
font-family: "微软雅黑";
font-size: 12px;
color: #666666;
text-align: center;
line-height: 25px;
float: left;
}
.cartList ul li input[name="price"]{
border: none;
background: transparent;
width: 45px;
text-align: center;
}
.cartList ul li input[name="amount"]{
width: 45px;
text-align: center;
border: 1px solid #999999;
border-left: none;
border-right: none;
height: 21px;
}
.cartList ul li input[name="minus"],.cartList ul li input[name="plus"]{
height: 25px;
border: 1px #999999 solid;
width: 25px;
text-align: center;
}
.cartList ul li:nth-of-type(1){width: 130px;}
.cartList ul li:nth-of-type(2){width: 100px;}
.cartList ul li:nth-of-type(3){width: 130px;}
.cartList ul li:nth-of-type(4){width: 100px;}
.cartList ul li:nth-of-type(5){width: 130px;}
.cartList ul li p{cursor: pointer;}
.cartList ol{
float: right;
clear: both;
}
.cartList ol li{
float: left;
width: 200px;
}
.cartList ol li:nth-of-type(1) span{
color: #ff0000;
}
.cartList ol li:nth-of-type(2) span{display: inline-block;
float: right;
width: 80px;
height: 35px;
line-height: 35px;
font-size: 14px;
font-family: "微软雅黑";
background: #ff0000;
color: #ffffff;
text-align: center;
margin-top: 5px;
margin-right: 15px;
cursor: pointer;
font-weight: bold;}js文件：shopping.js
/*关闭窗口*/
function closeMe(){
window.close();
}
function collection(){
var flag=confirm("移入收藏后，将不再购物车显示，是否继续操作?");
if(flag==true){
alert("移入收藏成功!");
}
}
function del(thisObj){
var flag=confirm("您确定要删除商品吗?");
if(flag==true){
//要删除特定书本对应的UL
var delUL = thisObj.parentNode.parentNode;
//找到UL对应的父节点，由父节点进行删除操作
delUL.parentNode.removeChild(delUL);
alert("删除成功!");
//重新商品总计
total();
}
}
function account(){
// var flag=confirm("您本次购买的商品信息如下：\n\n商品名称：白岩松：白说、岛上书店；\n商品数量：2件；\n商品总计：46.00；\n运费：0元；\n\n请确认以上信息是否有误！！！");
// if(flag){
// alert("您的订单已提交");
// }
//获得两本书的分别价格，及总商品价格，显示在ID为info的div中
//第一本书的价格：第一本书UL中的倒数第二个LI
var ul = document.getElementById("cartList").firstElementChild.nextElementSibling;
var num1 = ul.lastElementChild.previousElementSibling.innerHTML;
//第二本书的价格：第二本书UL中的倒数第二个LI
var num2 = ul.nextElementSibling.lastElementChild.previousElementSibling.innerHTML;
//总价格：ID为cartList的div中的最后一个元素节点ol里面的第一个li
var total = document.getElementById("cartList").lastElementChild.firstElementChild.innerHTML;
//提示信息
var str = "您本次购买的商品信息如下：<br/>我的狗狗活下来了："+num1+"<br/>灰霾来了："+num2+"<br/>"+total;
//将提示信息显示在ID为info的div中
document.getElementById("info").innerHTML = str;
}
//计算购物车商品总金额
function total(){
//分别拿到所有商品的单价及数量
var prices = document.getElementsByName("price");
var amounts = document.getElementsByName("amount");
//总金额
var sum = 0;
for(var i=0;i<prices.length;i++){
sum+=prices[i].value*amounts[i].value;
}
//将总金额显示在正确位置上<li id="totalPrice">商品总计：<span></span></li>>
document.getElementById("totalPrice").getElementsByTagName("span")[0].innerHTML="￥"+sum;
}
total();
//商品数量增加的操作 index：哪一个account修改,集合中的哪一个商品元素（单价、数量对应的下标）
function plus(index){
//1 改变每个商品增加数量后的新数量
//拿到商品数量原来的值
var count = parseInt(document.getElementsByName("amount")[index].value);
//让商品数量原来的值+1
//让商品数量变为+1以后的新的数量值
document.getElementsByName("amount")[index].value=count+1;
//2 修改数量后每个商品的总金额要相应修改
var totalPer = parseFloat(document.getElementsByName("price")[index].value*(count+1));
document.getElementById("totalprice"+index).innerHTML = "￥"+totalPer;
//3 所有商品的总金额也要相应修改
total();
}
//商品数量减少的操作 index：哪一个account修改,集合中的哪一个商品元素（单价、数量对应的下标）
function minus(index){
//1 改变每个商品减少数量后的新数量
//拿到商品数量原来的值
var count = parseInt(document.getElementsByName("amount")[index].value);
if(count==1){
//对商品数量做一个判断，当当前商品数量已经=1的情况下，不能再减少了
alert("不能再减少了，再减就没有啦！");
}else{
//让商品数量原来的值-1
//让商品数量变为-1以后的新的数量值
document.getElementsByName("amount")[index].value=count-1;
//2 修改数量后每个商品的总金额要相应修改
var totalPer = parseFloat(document.getElementsByName("price")[index].value*(count-1));
document.getElementById("totalprice"+index).innerHTML = "￥"+totalPer;
//3 所有商品的总金额也要相应修改
total();
}
}html文件：shopping.html
<!DOCTYPE html>
<html>
<head lang="zh">
<meta charset="UTF-8">
<title>当当购物车删除商品</title>
<link type="text/css" rel="stylesheet" href="css/cartStyle.css" />
</head>
<body>
<div class="content">
<div class="logo">
<img src="images/dd_logo.jpg"><span onclick="closeMe()">关闭</span>
</div>
<div class="cartList" id="cartList">
<ul>
<li>商品图片</li>
<li>商品信息</li>
<li>单价</li>
<li>数量</li>
<li>总价</li>
<li>操作</li>
</ul>
<ul>
<li><img src="images/dog.jpg"></li>
<li>我和狗狗活下来了</li>
<li>¥<input type="text" name="price" value="21.90"></li>
<li><input type="button" name="minus" value="-" onclick="minus(0)"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+" onclick="plus(0)"></li>
<li id="totalprice0">¥21.90</li>
<li><p onclick="collection();">移入收藏</p><p onclick="del(this)">删除</p></li>
</ul>
<ul>
<li><img src="images/mai.jpg"></li>
<li>灰霾来了怎么办</li>
<li>¥<input type="text" name="price" value="24.00"></li>
<li><input type="button" name="minus" value="-" onclick="minus(1)"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+" onclick="plus(1)"></li>
<li id="totalprice1">¥24.00</li>
<li><p onclick="collection()">移入收藏</p><p onclick="del(this)">删除</p></li>
</ul>
<ol>
<li id="totalPrice">商品总计：<span></span></li>
<li><span onclick="account()">结 算</span></li>
</ol>
</div>
<div id="info"></div>
</div>
<script type="text/javascript" src="js/shopping.js"></script>
</body>
</html>html中的图片在这：
1.dd_logo.jpg
2.dog.jpg
3.mai.jpg
无水印的原图片在评论区！！