js删除li元素代码实例

快乐打工仔 分类:实例代码

分享一段代码实例,它实现了删除指定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>

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

相关阅读:

(1).display: flex可以参阅css3 Flex弹性布局一章节。

(2).justify-content可以参阅justify-content一章节。

(3).align-items可以参阅align-items一章节。

(4).counter-reset可以参阅counter-reset、counter()和counter-increment一章节。

(5).:first-child可以参阅css :first-child一章节。

(6).:nth-last-child()可以参阅CSS E:nth-last-child(n)一章节。

(7).document.querySelector()可以参阅document.querySelector()一章节。

(8).addEventListener()可以参阅addEventListener()一章节。

(9).lastElementChild可以参阅lastElementChild一章节。

(10).parentNode可以参阅parentNode一章节。

(11).removeChild()可以参阅js removeChild()一章节。

js删除li元素代码实例,这样的场景在实际项目中还是用的比较多的,关于js删除li元素代码实例就介绍到这了。

js删除li元素代码实例属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容