jQuery動態增加刪除li及事件繫結
阿新 • • 發佈：2019-02-14
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文件</title> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <style type="text/css"> div{ width: 100px; height: 100px; background: red; } li{ list-style: none; } span{ display: inline-block; width: 100px; } </style> <script type="text/javascript"> /* $(function(){ $('button').click(function(){ if($('div').length>0){ $('div').remove(); //remove()移除被選元素，包括文字跟子節點。是真刪除了，相當於原生js的 Element.parentNode.removeChild() 在當前父節點中刪除元素 }else{ $('body').prepend('<div>123</div>'); //prepend()在當前元素前部插入 } }); }); var bool = true; window.onload = function(){ var oS = document.getElementsByTagName('button')[0]; oS.onclick = function(){ if(bool){ var oD = document.getElementsByTagName('div')[0]; oD.parentNode.removeChild(oD); bool = false; }else{ var oDd = document.createElement('div'); var body = document.getElementsByTagName('body')[0]; oDd.innerHTML = '123'; body.insertBefore(oDd,oS); //在oS之前插入oDd bool = true; } } //原生動態增加 刪除 元素 要實現這個效果用css中的display就可以實現 我這樣寫，腦子沒問題，剛學jQuery，熟悉熟悉 } */ //用jQuery實現的一個可以動態新增刪除li 並且可以重新整理行數 感覺這程式碼寫的很爛，但又不知道還能怎麼優化，有好的建議可以告訴我哈 $(function(){ $('.remove').click(function(){ $(this).parent().remove(); //parent() 返回當前元素集合的父元素 changeSpan(); });//為原有的btn繫結點選時間 $('#add').click(function(){ $('ul').prepend('<li><span></span><button class="remove">刪除</button></li>'); $('.remove').click(function(){ $(this).parent().remove(); changeSpan(); }); changeSpan(); });//新增li 並繫結btn點選事件 ， 然後 重新整理下行數 function changeSpan(){ for (var i=0;i<$('span').length;i++) { $($('span')[i]).html(i); } }//修改行數 }); </script> </head> <body> <div>div</div> <!--<button>按鈕</button>--> <button id="btn1">按鈕</button> <ul> <li><span>1</span><button class="remove">刪除</button></li> <li><span>2</span><button class="remove">刪除</button></li> <li><span>3</span><button class="remove">刪除</button></li> <li><span>4</span><button class="remove">刪除</button></li> <li><span>5</span><button class="remove">刪除</button></li> </ul> <button id="add">增加</button> </body> </html>