javascript - 關(guān)于JS 事件委托操作ul li標(biāo)簽的問題
問題描述
先說一下我想要實(shí)現(xiàn)的功能，就是在一個ul 里面 點(diǎn)擊某個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. mac連接阿里云docker集群，已經(jīng)卡了2天了，求問？2. javascript - js 有什么優(yōu)雅的辦法實(shí)現(xiàn)在同時打開的兩個標(biāo)簽頁間相互通信？3. java - spring-data Jpa 不需要執(zhí)行save 語句，Set字段就可以自動執(zhí)行保存的方法？求解4. css3 - 在sublime text里， 如何讓emmet生成的帶前綴css屬性垂直對齊？5. css3 - Typecho 后臺部分表單按鈕在 Chrome 下出現(xiàn)靈異動畫問題，求解決6. html5和Flash對抗是什么情況？7. javascript - 一個抽獎的效果（如圖）？8. javascript - weex和node,js到底是怎樣一個關(guān)系呢？9. javascript - 求解答，koa-bodyparser獲取到的參數(shù)是空對象，為什么？？？？？10. 想找個php大神仿個網(wǎng)站。
網(wǎng)公網(wǎng)安備