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. html5和Flash對抗是什么情況？2. 數(shù)據(jù)庫 - Mysql的存儲過程真的是個坑！求助下面的存儲過程哪里錯啦，實(shí)在是找不到哪里的問題了。3. ios - 類似微博首頁，一張圖的時候是如何確定圖大小的？4. MySQL主鍵沖突時的更新操作和替換操作在功能上有什么差別(如圖)5. javascript - 在ie下為什么會出現(xiàn)這種情況呢 《 無法獲取未定義或 null 引用的屬性“l(fā)ength”》 ？請大神指教。6. javascript - 我是做web前端的，公司最近有一個項目關(guān)于數(shù)據(jù)統(tǒng)計的！7. javascript - 如何使用loadash對[object,object,object]形式的數(shù)組進(jìn)行比較8. css右浮動字的順序顛倒了9. javascript - vue過渡效果 css過渡 類名的先后順序10. javascript - vuejs+elementui 購物車價格計算，點(diǎn)擊加減號修改數(shù)量總價都不會改變，但是計算執(zhí)行了
網(wǎng)公網(wǎng)安備