JavaScript使用ul中l(wèi)i標(biāo)簽實(shí)現(xiàn)刪除效果
更新時(shí)間：2019年04月15日 08:38:39 作者：拽是男人的本性
這篇文章主要為大家詳細(xì)介紹了JavaScript使用ul中l(wèi)i標(biāo)簽實(shí)現(xiàn)刪除效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js使用ul中l(wèi)i標(biāo)簽實(shí)現(xiàn)刪除效果的具體代碼，供大家參考，具體內(nèi)容如下
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul {
list-style: none;
}
li {
background-color: #ddd;
margin-top: 2px;
}
li:hover {
background-color: #be3131;
}
li.hover {
background-color: green;
}
;
</style>
</head>
<body>
<ul id="uid">
<li>籃球</li>
<li>足球</li>
<li>羽毛球</li>
<li>籃球</li>
<li>足球</li>
<li>羽毛球</li>
<li>籃球</li>
<li>足球</li>
<li>羽毛球</li>
</ul>
<button onclick="doDel()">刪除</button>
<script type="text/javascript">
//獲取所有的li節(jié)點(diǎn)
var list = document.getElementById("uid").getElementsByTagName("li");
//給每一個(gè)li節(jié)點(diǎn)添加class屬性
for(var i = 0; i < list.length; i++) {
list[i].onclick = function() {
if(this.className == "hover") {
this.className = "";
} else {
this.className = "hover";
}
}
}
//刪除操作
function doDel() {
for(var i = 0; i < list.length; i++) {
if(list[i].className == "hover") {
list[i].parentNode.removeChild(list[i]);
i--;
}
}
}
</script>
</body>
</html>
效果圖：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了js針對(duì)圖片加載失敗的處理方法,結(jié)合實(shí)例形式分析了js針對(duì)圖片加載失敗時(shí)的事件監(jiān)聽(tīng)、響應(yīng)等相關(guān)操作技巧,需要的朋友可以參考下2019-08-08
spirngmvc js傳遞復(fù)雜json參數(shù)到controller的實(shí)例
下面小編就為大家分享一篇spirngmvc js傳遞復(fù)雜json參數(shù)到controller的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
JS圖片懶加載的優(yōu)點(diǎn)及實(shí)現(xiàn)原理
這篇文章主要介紹了JS圖片懶加載的優(yōu)點(diǎn)及實(shí)現(xiàn)原理,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-01-01
微信小程序的運(yùn)行機(jī)制與安全機(jī)制解決方案詳解
這篇文章主要介紹了微信小程序的運(yùn)行機(jī)制與安全機(jī)制解決方案，接觸小程序有一段時(shí)間了，總得來(lái)說(shuō)小程序開(kāi)發(fā)門(mén)檻比較低，但其中基本的運(yùn)行機(jī)制和原理還是要懂的2023-02-02
js操作table元素實(shí)現(xiàn)表格行列新增、刪除技巧總結(jié)
這篇文章主要介紹了js操作table元素實(shí)現(xiàn)表格行列新增、刪除技巧,以實(shí)例形式分析總結(jié)了JavaScript針對(duì)table表格進(jìn)行行列的增加與刪除相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11
這篇文章主要為大家分享了javascript、jquery實(shí)用代碼段,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
js為鼠標(biāo)添加右擊事件防止默認(rèn)的右擊菜單彈出
本文為大家介紹下如何為使用js為鼠標(biāo)添加右擊事件防止默認(rèn)的右擊菜單彈出，感興趣的朋友可以參考下，希望對(duì)大家有所幫助2013-07-07
表格同行中存在元素的相互調(diào)用，如何保證元素能夠被同行不同列的其他方框使用呢？下面通過(guò)實(shí)例代碼給大家介紹下，一起看看吧2016-12-12
jQuery實(shí)現(xiàn)可收縮展開(kāi)的級(jí)聯(lián)菜單實(shí)例代碼
這篇文章主要是對(duì)利用jQuery實(shí)現(xiàn)可收縮展開(kāi)的級(jí)聯(lián)菜單的實(shí)例代碼進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11
webpack 是一個(gè)模塊打包器,這篇文章主要介紹了webpack5 常用插件使用問(wèn)題小結(jié),每次打包完都需要手動(dòng)刪除掉dist文件目錄,使用CleanWebpackPlugin就可自動(dòng)清除dist目錄,感興趣的朋友跟隨小編一起看看吧2024-02-02