js实现点击按钮删除所在的列表项

813 阅读1分钟

拼多多笔试之简答题

html代码,无序列表中包含一些列列表项,每个列表项由文案和一个删除按钮构成。请实现:点击删除按钮时会移除按钮所在的列表项

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<ul id="list">
  <li>
    <span>1</span>
    <button>刪除</button>
  </li>
  <li>
    <span>2</span>
    <button>刪除</button>
  </li>
  <li>
    <span>3</span>
    <button>刪除</button>
  </li>
  <li>
    <span>4</span>
    <button>刪除</button>
  </li>
  <li>
    <span>5</span>
    <button>刪除</button>
  </li>
  <li>
    <span>6</span>
    <button>刪除</button>
  </li>
</ul>
<script>
//你的代码
</script>
</body>
</html>

实现如下:

<script>
// 为每个按钮设置点击事件
var btn=document.getElementsByTagName('button');
for(let i=0;i<btn.length;i++){
    btn[i].onclick=function(){
        del(this);
    };
}
//删除 删除按钮所在列表项
function del(obj){
    var oParent=obj.parentNode;
    var ul=document.getElementById('list');
    ul.removeChild(oParent);
}
</script>