js刪除li元素程式碼例項
分享一段程式碼例項,它實現了刪除指定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()一章節。
相關文章
- js刪除指定的li元素程式碼例項JS
- jquery刪除前n個li元素程式碼例項jQuery
- js刪除陣列重複元素程式碼例項JS陣列
- jquery刪除指定元素程式碼例項jQuery
- jquery刪除指定子元素程式碼例項jQuery
- javascript刪除指定子元素程式碼例項JavaScript
- JavaScript刪除元素節點程式碼例項JavaScript
- js實現li元素隔行背景變色例項程式碼JS
- 獲取指定元素下所有li元素程式碼例項
- jquery動態新增li元素程式碼例項jQuery
- css匹配指定行li元素程式碼例項CSS
- removeChild()刪除li元素REM
- 原生js刪除節點程式碼例項JS
- javascript刪除陣列重複元素程式碼例項JavaScript陣列
- 刪除陣列中的指定元素例項程式碼陣列
- javascript按照值刪除陣列元素程式碼例項JavaScript陣列
- css匹配第n個li元素程式碼例項CSS
- jQuery獲取指定的li元素程式碼例項jQuery
- jQuery調整li元素順序程式碼例項jQuery
- jQuery獲取所有的li元素程式碼例項jQuery
- javascript獲取li元素內容程式碼例項JavaScript
- jQuery刪除指定li元素jQuery
- 原生js刪除字串中空格程式碼例項JS字串
- js刪除字串兩端空格程式碼例項JS字串
- javascript刪除陣列中重複元素程式碼例項JavaScript陣列
- 使用jQuery刪除一個元素節點程式碼例項jQuery
- jQuery實現的刪除指定子元素程式碼例項jQuery
- 動態的新增或者刪除指定元素程式碼例項
- html元素的動態新增和刪除程式碼例項HTML
- jQuery新增和刪除元素class屬性例項程式碼jQuery
- CSS匹配第一個li元素程式碼例項CSS
- 獲取指定區間的li元素程式碼例項
- css匹配最後一個li元素程式碼例項CSS
- jQuery 刪除當前li元素jQuery
- JavaScript 刪除指定的li元素JavaScript
- js刪除字串中所有空格程式碼例項JS字串
- js刪除陣列中重複項的程式碼例項JS陣列
- javascript實現的交換li元素的位置程式碼例項JavaScript