题目如下:
利用面向对象思想完成买家信息删除功能,每一条买家信息包含
姓名 (name)性别 (sex)
电话号码 (number)
省份 (province)
实现以下要求:
1、不能借助任何三方库,需使用原生代码实现
2、结合给出的基本代码结构,在下方2处 code here 处补充代码,完成买家信息的删除功能,注意此页面需要在手机上清晰显示。
3、js 代码可任意调整,例如可使用 es6 语法完成
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--code here-->
<title>demo</title>
<style>
* {
padding: 0;
margin: 0;
}
.head, li div {
display: inline-block;
width: 70px;
text-align: center;
}
li .id, li .sex, .id, .sex {
width: 15px;
}
li .name, .name {
width: 40px;
}
li .tel, .tel {
width: 90px;
}
li .del, .del {
width: 15px;
}
ul {
list-style: none;
}
.user-delete {
cursor: pointer;
}
</style>
</head>
<body>
<div id="J_container">
<div class="record-head">
<div class="head id">序号</div>
<div class="head name">姓名</div>
<div class="head sex">性别</div>
<div class="head tel">电话号码</div>
<div class="head province">省份</div>
<div class="head">操作</div>
</div>
<ul id="J_List">
<li>
<div class="id">1</div>
<div class="name">张三</div>
<div class="sex">男</div>
<div class="tel">13788888888</div>
<div class="province">浙江</div>
<div class="user-delete">删除</div>
</li>
<li>
<div class="id">2</div>
<div class="name">李四</div>
<div class="sex">女</div>
<div class="tel">13788887777</div>
<div class="province">四川</div>
<div class="user-delete">删除</div>
</li>
<li>
<div class="id">3</div>
<div class="name">王二</div>
<div class="sex">男</div>
<div class="tel">13788889999</div>
<div class="province">广东</div>
<div class="user-delete">删除</div>
</li>
</ul>
</div>
<script>
var ul = document.getElementById("J_List");
var del = document.getElementsByClassName('user-delete');
for (let i = 0; i < del.length; i++) {
del[i].onclick = function (event) {
ul.removeChild(event.target.parentNode);
};
}
</script>
</body>
</html>
大家要注意注册点击事件时,可以传入一个event参数,以此找到哪个选项被点击。