js删除li元素代码实例

快乐打工仔发布于 2年前分类：实例代码

分享一段代码实例，它实现了删除指定li元素的功能。

并且根据当前li的数量来设置li元素背景颜色。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
</head>
<body>
<style>
* {
  padding: 0;
  margin: 0;
}
 
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
 
ul {
  list-style: none;
}
 
.box {
  counter-reset: test 0;
  letter-spacing: -.5em;
}
 
.box li {
  display: inline-block;
  width: 80px;
  height: 80px;
  margin: 0 1em;
  font-size: 20px;
  letter-spacing: 0;
  color: #FFF;
  text-align: center;
  line-height: 80px;
  background-color: #AAA;
  border-radius: 4px;
  counter-increment: test;
}
 
.box li::before {
  content: counter(test);
}
 
.box li:only-child {
  background-color: red;
}
 
li:first-child:nth-last-child(2),
li:first-child:nth-last-child(2) ~ li {
  background-color: green;
}
 
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
  background-color: blue;
}
 
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
  background-color: yellow;
}
 
li:first-child:nth-last-child(5),
li:first-child:nth-last-child(5) ~ li {
  background-color: violet;
}
 
li:first-child:nth-last-child(6),
li:first-child:nth-last-child(6) ~ li {
  background-color: orange;
}
</style>
<ul class="box">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
<button>删除一个</button>
<script>
(function() {
  var list = document.querySelector(".box");
  document.querySelector("button").addEventListener("click", function() {
    var lastChild = list.lastElementChild;
    if (lastChild) {
      lastChild.parentNode.removeChild(lastChild);
    }
  });
})();
</script>
</body>
</html>

上面的代码实现了我们的要求，更多内容可以参阅相关阅读。