<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>购物车全选功能</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: #666;
}
body {
background: #fff;
color: #666;
font-size: 14px;
}
input {
outline: none;
}
.clearfix::before,
.clearfix::after {
content: '';
display: block;
clear: both;
}
.clearfix {
*zoom: 1;
}
</style>
<style>
table {
width: 800px;
margin: 0 auto;
border-collapse: collapse;
}
th {
font: normal 14px/50px '宋体';
color: #666;
}
th,
td {
border: none;
text-align: center;
border-bottom: 1px dashed #ccc;
}
input[type='checkbox'] {
width: 13px;
height: 13px;
}
tbody p {
position: relative;
bottom: 10px;
}
tbody .add,
tbody .reduce {
float: left;
width: 22px;
height: 22px;
border: 1px solid #ccc;
text-align: center;
background: none;
outline: none;
cursor: pointer;
}
tbody input[type='text'] {
width: 50px;
float: left;
height: 18px;
text-align: center;
}
tbody .count-c {
width: 98px;
margin: 0 auto;
}
button[disabled] {
color: #ddd;
cursor: not-allowed;
}
tbody tr:hover {
background: #eee;
}
tbody tr.active {
background: rgba(241, 209, 149, 0.945);
}
.controls {
width: 790px;
margin: 10px auto;
border: 1px solid #ccc;
line-height: 50px;
padding-left: 10px;
position: relative;
}
.controls .del-all,
.controls .clear {
float: left;
margin-right: 50px;
}
.controls p {
float: right;
margin-right: 100px;
}
.controls span {
color: red;
}
.controls .pay {
position: absolute;
right: 0;
width: 80px;
height: 54px;
background: red;
font: bold 20px/54px '宋体';
color: #fff;
text-align: center;
bottom: -1px;
}
.controls .total-price {
font-weight: bold;
}
</style>
</head>
<body>
<div class="car">
<table>
<thead>
<tr>
<th><input type="checkbox" id="all" />全选</th>
<th>商品</th>
<th>单价</th>
<th>商品数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody id="carBody">
<tr>
<td>
<input class="s_ck" type="checkbox" readonly />
</td>
<td>
<img src="./images/01.jpg" />
<p>牛奶</p>
</td>
<td class="price">5￥</td>
<td>
<div class="count-c clearfix">
<button class="reduce" disabled>-</button>
<input type="text" value="1" />
<button class="add">+</button>
</div>
</td>
<td class="total">5￥</td>
<td>
<a href="javascript:" class="del">删除</a>
</td>
</tr>
<tr>
<td>
<input class="s_ck" type="checkbox" />
</td>
<td>
<img src="./images/01.jpg" />
<p>牛奶</p>
</td>
<td class="price">10￥</td>
<td>
<div class="count-c clearfix">
<button class="reduce" disabled>-</button>
<input type="text" value="1" />
<button class="add">+</button>
</div>
</td>
<td class="total">10￥</td>
<td>
<a href="javascript:" class="del">删除</a>
</td>
</tr>
<tr>
<td>
<input class="s_ck" type="checkbox" />
</td>
<td>
<img src="./images/01.jpg" />
<p>牛奶</p>
</td>
<td class="price">20￥</td>
<td>
<div class="count-c clearfix">
<button class="reduce" disabled>-</button>
<input type="text" value="1" />
<button class="add">+</button>
</div>
</td>
<td class="total">20￥</td>
<td>
<a href="javascript:" class="del">删除</a>
</td>
</tr>
<tr>
<td>
<input class="s_ck" type="checkbox" />
</td>
<td>
<img src="./images/01.jpg" />
<p>牛奶</p>
</td>
<td class="price">35￥</td>
<td>
<div class="count-c clearfix">
<button class="reduce" disabled>-</button>
<input type="text" value="1" />
<button class="add">+</button>
</div>
</td>
<td class="total">35￥</td>
<td>
<a href="javascript:" class="del">删除</a>
</td>
</tr>
</tbody>
</table>
<div class="controls clearfix">
<a href="javascript:" class="del-all">删除所选商品</a>
<a href="javascript:" class="clear">清理购物车</a>
<a href="javascript:" class="pay">去结算</a>
<p>
已经选中<span id="totalCount">0</span>件商品;总价：<span id="totalPrice" class="total-price">0￥</span>
</p>
</div>
</div>
<script>
//+ - 删除时一一对应的，可以用一个for绑定事件
let adds = document.querySelectorAll('.add')
let reduces = document.querySelectorAll('.reduce')
let dels = document.querySelectorAll('.del')
// 数量框
let inputs = document.querySelectorAll('.count-c input')
// 单价
let prices = document.querySelectorAll('.price')
// 小计
let totals = document.querySelectorAll('.total')
//选中商品个数元素
let totalCounts = document.querySelector('#totalCount')
//总价元素
let totalPrice = document.querySelector('#totalPrice')
//要删除的元素的父元素
let delet = document.querySelector('#carBody')
// 获取全选按钮
let selAll = document.querySelector('#all')
//获取所有按钮
let btns = document.querySelectorAll('.s_ck')
//获取清空购物车选项
let allRemove = document.querySelector('.clear')
//获取 删除所选商品 的按钮
let selPart = document.querySelector('.del-all')
for(let i = 0; i < adds.length; i++){
totals[i].innerText = prices[i].innerText
result()
//1, + 事件
adds[i].addEventListener('click',function () {
// 数量商品 +1
inputs[i].value++
// 释放 - 按钮
reduces[i].disabled = false
// 单价 = parseInt(prices[i].innerText) parseInt()为了将‘5￥’ 中5 提取出来
// 总价 的字符串 = totals[i].innerText
totals[i].innerText = inputs[i].value * parseInt(prices[i].innerText) + '￥'
//
result()
})
//2, - 事件
reduces[i].addEventListener('click',function () {
if(--inputs[i].value <= 1){
this.disabled = true
}
totals[i].innerText = inputs[i].value * parseInt(prices[i].innerText) + '￥'
result()
})
//3, 删除 事件
dels[i].addEventListener('click',function () {
// 父元素.removeChile(子元素)
// 删除的时tr 父元素是tbody
delet.removeChild(this.parentNode.parentNode)
result()
})
//6,选择事件 判断是否全选
btns[i].addEventListener('click',function () {
for(let j = 0; j < btns.length; j++){
// 如果有一个没有勾选，那么全选按钮就直接 = false 函数结束
if(btns[j].checked === false){
// 全选按钮 = false
selAll.checked = false
return
}
}
selAll.checked = true
})
}
//4,计算总价 计算总个数
function result () {
// 重新获取数量
let inputs = document.querySelectorAll('.count-c input')
// 重新获取小计
let totals = document.querySelectorAll('.total')
let sumCount = 0
let sumPrice = 0
for(let i = 0; i < totals.length; i++){
// sumCount += 小计的数字
sumPrice += parseInt(totals[i].innerText)
sumCount += parseInt(inputs[i].value)
}
totalPrice.innerHTML = sumPrice + '￥'
totalCounts.innerHTML = sumCount
}
// 5,全选事件
selAll.addEventListener('click',function () {
for(let i = 0; i < btns.length; i++){
btns[i].checked = this.checked
}
})
// 7,清空购物车事件
allRemove.addEventListener('click',function () {
// 重新获取当前的选项数量
sum = delet.children.length
for(let i = 0 ; i < sum; i++){
delet.removeChild(delet.children[0])
}
result()
})
// 8,删除所选的商品事件
selPart.addEventListener('click',function () {
//保存被选中的元素
let arr = []
// 遍历选项，把被勾选的选择加入到数组中
for(let i = 0; i < btns.length; i++){
if(btns[i].checked === true){
arr.push(btns[i])
}
}
// console.log(arr)
for(let j = 0; j < arr.length; j++){
// delet.removeChild(arr[j].parentNode.parentNode)
console.log(arr[j].parentNode.parentNode)
}
// console.log(arr)
})
</script>
</body>
</html>
在8，删除所选的商品事件中，delet.removeChild(arr[j].parentNode.parentNode)
父子元素都是对的，但是在实现删除时，第一次可以成功后面就不行了
报错：Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
at HTMLAnchorElement.
