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. mysql儲(chǔ)存json錯(cuò)誤2. sql語(yǔ)句 - 如何在mysql中批量添加用戶？3. 怎么php怎么通過(guò)數(shù)組顯示sql查詢(xún)結(jié)果呢，查詢(xún)結(jié)果有多條，如圖。4. mysql - 表名稱(chēng)前綴到底有啥用？5. 編輯成功不顯示彈窗6. 哭遼 求大佬解答 控制器的join方法怎么轉(zhuǎn)模型方法7. 在mybatis使用mysql的ON DUPLICATE KEY UPDATE語(yǔ)法實(shí)現(xiàn)存在即更新應(yīng)該使用哪個(gè)標(biāo)簽?8. mysql - 數(shù)據(jù)庫(kù)表中，兩個(gè)表互為外鍵參考如何解決9. mysql - 怎么生成這個(gè)sql表？10. Navicat for mysql 中以json格式儲(chǔ)存的數(shù)據(jù)存在大量反斜杠，如何去除？
網(wǎng)公網(wǎng)安備