5-2 作业删除功能问题
来源：5-2 作业题
烟宇
2017-12-29 19:27:52
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>购物车</title>
<link rel="stylesheet" href="css/base.css">
<script src="js/script.js"></script>
<script src="js/jquery-1.11.1.js"></script>
</head>
<body>
<header>
<div class="logo">
<a href="index.html" title="首页">
<img src="img/logo.png" alt="">
</a>
</div>
<div class="nav-l">
<a href="#">课程</a>
<a href="#">职业路径</a>
<i class="icon-new"></i>
<a href="#">实战</a>
<a href="#">猿问</a>
<a href="#">手记</a>
</div>
<div class="search">
<input type="text">
<a href="#" class="searchItem">前端入门</a>
<i class="icon-search"></i>
</div>
<div class="nav-r">
<a href="#" class="lock"></a>
<a href="#" class="bell"></a>
<a href="#" class="user"></a>
</div>
</header>
<nav class="banner"></nav>
<section class="main">
<h3 class="my-car">我的购物车</h3>
<div class="shopping clearfix">
<div class="car-head">
<div class="head-box box"><input type="checkbox" id="theadInp"/>全选</div>
<div class="p-name box">商品名称</div>
<div class="sum-price box">总价</div>
<div class="one-price box">单价</div>
<div class="num box">数量</div>
<div class="operate">操作</div>
</div>
<div class="item1 item">
<div class="item-head box"><input type="checkbox" id="theadInp"/></div>
<div class="item-name box">
<a href="#" class="img1"><img src="img/g2.jpg" alt=""></a>
<a href="#" class="img1-title">前端小白成长记</a>
</div>
<div class="item-price1 box">
¥
<i></i>
</div>
<div class="item-price2 box">
¥ 396
<i></i>
</div>
<div class="item-num box">
<a href="#" class="subtract">-</a>
<input type="text" placeholder="1">
<a href="#" class="add">+</a>
</div>
<div class="item-delete operate"><a href="#" class="deleted">删除</a></div>
</div>
<div class="item2 item">
<div class="item-head box"><input type="checkbox" id="theadInp"/></div>
<div class="item-name box">
<a href="#" class="img1"><img src="img/g1.jpg" alt=""></a>
<a href="#" class="img1-title">前端小白成长记</a>
</div>
<div class="item-price1 box">
¥
<i></i>
</div>
<div class="item-price2 box">
¥ 396
<i></i>
</div>
<div class="item-num box">
<a href="#" class="subtract">-</a>
<input type="text" placeholder="1">
<a href="#" class="add">+</a>
</div>
<div class="item-delete operate"><a href="#" class="deleted">删除</a></div>
</div>
<div class="item3 item">
<div class="item-head box"><input type="checkbox" id="theadInp"/></div>
<div class="item-name box">
<a href="#" class="img1"><img src="img/g2.jpg" alt=""></a>
<a href="#" class="img1-title">前端小白成长记</a>
</div>
<div class="item-price1 box">
¥
<i></i>
</div>
<div class="item-price2 box">
¥ 396
<i></i>
</div>
<div class="item-num box">
<a href="#" class="subtract">-</a>
<input type="text" placeholder="1">
<a href="#" class="add">+</a>
</div>
<div class="item-delete operate"><a href="#" class="deleted">删除</a></div>
</div>
<div class="item4 item">
<div class="item-head box"><input type="checkbox" id="theadInp"/></div>
<div class="item-name box">
<a href="#" class="img1"><img src="img/g2.jpg" alt=""></a>
<a href="#" class="img1-title">前端小白成长记</a>
</div>
<div class="item-price1 box">
¥
<i></i>
</div>
<div class="item-price2 box">
¥ 396
<i></i>
</div>
<div class="item-num box">
<a href="#" class="subtract">-</a>
<input type="text" placeholder="1">
<a href="#" class="add">+</a>
</div>
<div class="item-delete operate"><a href="#" class="deleted">删除</a></div>
</div>
</div>
</section>
<section>
<div class="payMoney">
<div class="sumMoney">
应付金额:
<i class="sumcount"> ¥ </i>
</div>
<div class="pay">
<a href="#">
<input type="button" value="结算">
</a>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="container-left">
<div class="container-left-link">
<a href="#">网站首页</a>
<a href="#">企业合作</a>
<a href="#">人才招聘</a>
<a href="#">联系我们</a>
<a href="#">讲师招募</a>
<a href="#">常见问题</a>
<a href="#">意见反馈</a>
<a href="#">慕课大学</a>
<a href="#">友情链接</a>
</div>
<div class="copyright">
Copyright © 2017 imooc.com All Rights Reserved | 京ICP备 13046642号-2
</div>
</div>
<div class="container-right">
<a href="#" class="container-right-wechat"></a>
<a href="#" class="container-right-blog"></a>
<a href="#" class="container-right-qq"></a>
</div>
</div>
</footer>
</body>
</html>
//js代码为何实现不了点击删除，删除其父元素div呢？
var del = document.getElementsByClassName("operate");
// 删除功能
for(var i = 0; i < del.length; i ++){
deleted[i].onclick = function (){
deleted[i].parentNode.removeChild(deleted[i]);
}
}
2回答
-
Miss路
2017-12-31
参考下面的思路：
1、封装结算的函数。函数中要遍历取到每条商品数据的详细信息，计算每个商品的数量乘以单价，并将值写入该商品的总价中；判断只有该商品处于选中状态时，它的总价才能累加入总付款中，并将总付款的值写入应付金额的位置。
2、对于商品数据的每次操作，处理之后都调用一次结算函数，完成总价和应付金额的更新。
建议你重新整理思路，一步一步来实现，如果还是一点头绪都没有，建议重新把js的课程学习一下，或者提交作业，批作业的老师会根据你作业的每个错误点给出指导。但是首先要自己先去努力的查找问题。加油！
0 -
JH鹰
2017-12-29
js代码为何实现不了点击删除，删除其父元素div呢？ 可以的 你根本没有 获取 等等；好多错误点 你的思路很特别 思路在仔细考虑下
0
相似问题