用JS实现删除买家信息（阿里巴巴模拟笔试）
利用面向对象思想完成买家信息删除功能，每一条买家信息包含
姓名（name）
性别（sex）
电话号码（number）
省份（province）
实现以下要求：
不能借用任何第三方库，需要使用原生代码实现。
结合给出的基本代码结构，在下方2处code here补充代码，完成买家信息的删除功能，注意此页面要在手机上清晰显示。
js代码可以任意调整，例如和使用es6代码完成。
完成下列代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--code here-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>demo</title>
<style>
body,div,ul,li{ 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>
<script>
// 此处也可换成ES6的写法
function Contact(){
this.init();
}
// your code here
Contact.prototype.init=function(){
var userDelete=document.getElementsByClassName("user-delete");
var oUl=document.getElementById("J_List");
var oLi=oUl.getElementsByTagName("li");
for(var i= 0;i<userDelete.length;i++) {
(function(num) {
userDelete[num].onclick = function () {
oLi[num].parentNode.removeChild(oLi[num]);
}
})(i);
}
};
var contact1=new Contact();
</script>
</div>
</body>
</html>
填写代码处一：
这里使用meta标签的viewport来实现移动端页面自适应，理论上讲使用这个标签是可以适应所有尺寸的屏幕的，但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。viewport 是用户网页的可视区域。翻译为中文可以叫做"视区"。手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。
viewport标签极其属性：
这是实现页面自适应的普遍方法，其他方法可见https://yusi123.com/2539.html
填写代码处二：
思路：先获取class为user-delete的所有div以及id为J_List的ul下的li，然后利用循环为每一个user-delete加上onclick事件，当点击时删除其父元素li。
1.在Javascript中，只提供了一种删除节点的方法：removeChild()。
removeChild() 方法指定元素的某个指定的子节点。
语法：
node.removeChild(node)
node 必需。希望删除的节点对象。
虽然removeChild()原本的作用使用来删除子节点，但是也可用来删除当前节点，例：
<div id="demo"> <div id="thisNode">点击删除我</div> </div> <script type="text/javascript"> document.getElementById("thisNode").onclick=function(){ this.parentNode.removeChild(this); } </script>
2.在遍历每一个user-delete时，使用的是函数表达式加闭包的方法。在函数声明外加上圆括号可转化为函数表达式，函数表达式后面加一对圆括号就可以调用函数，即
（function(){ //这里是块级作用域 })();
利用这种方式也可以用来模仿块级作用域（私有作用域），使其中的变量私有化。
for(var i= 0;i<userDelete.length;i++) { (function(num) { userDelete[num].onclick = function () { oLi[num].parentNode.removeChild(oLi[num]); } })(i);
}
这里将外部作用域的变量i作为参数传给内部第一个匿名函数，这个匿名函数有一个参数num，当每一个i传入时，都会将当前值复制给num。当发生点击事件的时候，会触发第二个匿名函数，这个包含num的闭包可访问上一级作用域中的num的值，也就是当前的i值。
浙公网安备 33010602011771号