阿里秋招内推编程题

2017.8参加了阿里的内推。面试前被要求做了一道编程题，现在分享一下。

题目要求：
巴拉巴拉具体忘记了，大概就是一个列表，每个列表后面有个删除按钮，点击相应的删除按钮就可以删除相应的列表的其中一行，并且要以面向对象的方式实现。题目知识点：闭包，构造函数与原型。下面是我的代码：

<!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>
  // 此处也可换成ES6的写法
  function Contact() {
    this.init();
  }
  // your code here
  Contact.prototype.init = function () {
     btn = document.getElementsByClassName('user-delete');
     li = document.getElementsByTagName('li');
    for (let i = 0; i < btn.length; i++) {
      li[i].onclick = function () {
        this.remove();
      }
    }
  };
  new Contact();
</script>
</body>
</html>

思考：提交后发现自己的代码有一点问题。题目要求的是点击相应的删除按钮删除列表的相应行。而我是点击整一个<li></li>的任何一处都可以删除。后来思考了一下，将for循环内的代码改为btn[i].onclick = function(){document.getElementById('J_List').removeChild('li[i]')}。但是还是不行，修改之后发现删除一行之后，dom的序号就变了，与之前取dom产生的数组序号不对应了。暂时没别的想法，有会的同学可以回复一下，谢谢！

阿里秋招内推编程题

hdu_bomb

引用和评论

网易2020/9/12笔试

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具