js刪除li元素程式碼例項

admin發表於2017-04-16
原文網址 : https://www.softwhy.com/article-7323-1.html
JS

分享一段程式碼例項，它實現了刪除指定li元素的功能。

並且根據當前li的數量來設定li元素背景顏色。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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()一章節。

相關文章