javascript - 關(guān)于JS 事件委托操作ul li標(biāo)簽的問(wèn)題
問(wèn)題描述
先說(shuō)一下我想要實(shí)現(xiàn)的功能，就是在一個(gè)ul 里面 點(diǎn)擊某個(gè)li標(biāo)簽 就移除當(dāng)前點(diǎn)擊的li。
但是搞來(lái)搞去就是沒(méi)能實(shí)現(xiàn)我想要的效果。
現(xiàn)在的問(wèn)題如下
怎么用更直接的方法取得當(dāng)前點(diǎn)擊的li下標(biāo)，for循環(huán)取下標(biāo)是百度淘來(lái)的。
移除是可以用了，但是它不是按我點(diǎn)擊的li移除 比如我點(diǎn)擊2 它會(huì)刪除3 or 4 不知道是不是if(e.target == children[i])這里判斷不對(duì)
點(diǎn)擊一次沒(méi)效果，要點(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; }} }});
問(wèn)題解答
回答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. Docker for Mac 創(chuàng)建的dnsmasq容器連不上/不工作的問(wèn)題2. docker - 如何修改運(yùn)行中容器的配置3. docker安裝后出現(xiàn)Cannot connect to the Docker daemon.4. java - instance method中 static后的<K>是什么意思?5. python3.x - python連oanda的模擬交易api獲取json問(wèn)題第五問(wèn)6. 錯(cuò)誤：java.lang.NoSuchMethodError：org.objectweb.asm.ClassWriter。<init>（I）V7. java - SSH框架中寫分頁(yè)時(shí)service層中不能注入分頁(yè)類8. php - 一個(gè)操作請(qǐng)求多個(gè)服務(wù)如何保證數(shù)據(jù)的安全？9. docker-machine添加一個(gè)已有的docker主機(jī)問(wèn)題10. debian - docker依賴的aufs-tools源碼哪里可以找到啊？
網(wǎng)公網(wǎng)安備