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 它會刪除3 or 4 不知道是不是if(e.target == children[i])這里判斷不對
點(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]) { //對比目標(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. html5 - 如何實(shí)現(xiàn)帶陰影的不規(guī)則容器？2. javascript - 循環(huán)嵌套多個(gè)promise應(yīng)該如何實(shí)現(xiàn)？3. mysql優(yōu)化 - 關(guān)于mysql分區(qū)4. css - 移動端字體設(shè)置問題5. objective-c - iOS開發(fā)支付寶和微信支付完成為什么跳轉(zhuǎn)到了之前開發(fā)的一個(gè)app?6. css3 - rem布局下，用戶瀏覽器的最小字號是12px怎么辦？7. vue.js - vue 打包后 nginx 服務(wù)端API請求跨域問題無法解決。8. 請教各位大佬，瀏覽器點(diǎn) 提交實(shí)例為什么沒有反應(yīng)9. 前端 - IE9 css兼容問題10. javascript - ionic2 input autofocus 電腦成功，iOS手機(jī)鍵盤不彈出
網(wǎng)公網(wǎng)安備