javascript - 關(guān)于JS 事件委托操作ul li標(biāo)簽的問題
問題描述
先說一下我想要實(shí)現(xiàn)的功能，就是在一個(gè)ul 里面 點(diǎn)擊某個(gè)li標(biāo)簽 就移除當(dāng)前點(diǎn)擊的li。
但是搞來搞去就是沒能實(shí)現(xiàn)我想要的效果。
現(xiàn)在的問題如下
怎么用更直接的方法取得當(dāng)前點(diǎn)擊的li下標(biāo)，for循環(huán)取下標(biāo)是百度淘來的。
移除是可以用了，但是它不是按我點(diǎn)擊的li移除 比如我點(diǎn)擊2 它會(huì)刪除3 or 4 不知道是不是if(e.target == children[i])這里判斷不對(duì)
點(diǎn)擊一次沒效果，要點(diǎn)第二次才執(zhí)行removeChild。
HTML結(jié)構(gòu)
<ul id='box'> <li data='2017'>0</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li></ul>
JS代碼
document.getElementById('box').addEventListener('click',function(e) { if(e.target && e.target.nodeName == 'LI') {var children = this.children; //獲取ul里面的所有l(wèi)i元素集合for(var i=0;i<children.length;i++){ if(e.target == children[i]) { //對(duì)比目標(biāo)元素和li集合元素//alert('目標(biāo)元素的下標(biāo)為：' + i); //輸出目標(biāo)元素的下標(biāo) document.getElementById(e.target.parentNode.id).removeChild(document.getElementById(e.target.parentNode.id).childNodes[i]);return; }} }});
問題解答
回答1：document.querySelector(’#box’).addEventListener(’click’,function(e){ if(e.target.nodeName=='LI'){e.target.parentNode.removeChild(e.target); }});回答2：
<!DOCTYPE HTML><html><ul id='box'> <li data='2017' onclick='removeli(this);'>0</li> <li onclick='removeli(this);'>1</li> <li onclick='removeli(this);'>2</li> <li onclick='removeli(this);'>3</li> <li onclick='removeli(this);'>4</li></ul><script>function removeli(node){node.parentNode.removeChild(node);}</script></html>
相關(guān)文章：
1. 關(guān)docker hub上有些鏡像的tag被標(biāo)記““This image has vulnerabilities””2. docker - 各位電腦上有多少個(gè)容器啊？容器一多，自己都搞混了，咋辦呢？3. nignx - docker內(nèi)nginx 80端口被占用4. docker容器呢SSH為什么連不通呢？5. mac里的docker如何命令行開啟呢？6. 關(guān)于docker下的nginx壓力測(cè)試7. 如何解決Centos下Docker服務(wù)啟動(dòng)無響應(yīng)，且輸入docker命令無響應(yīng)？8. docker 下面創(chuàng)建的IMAGE 他們的 ID 一樣？這個(gè)是怎么回事？？？？9. docker start -a dockername 老是卡住，什么情況？10. angular.js使用$resource服務(wù)把數(shù)據(jù)存入mongodb的問題。
網(wǎng)公網(wǎng)安備