JS動態增加刪除UL節點LI

標籤：des   style   blog   class   c   code   

JS如何動態增加刪除UL節點LI及相關內容。

<ul id="ul"> <li id=1>11111111111111111<a href="javascript:del(1);">del</a></li> <li id=2 >22222222222222222<a href="javascript:del(2);">del</a></li> <li id=3>33333333333333333<a href="javascript:del(3);">del</a></li> <li id=4>44444444444444444<a href="javascript:del(4);">del</a></li> <li id=5>55555555555555555<a href="javascript:del(5);">del</a></li> </ul> <select name="car_type" id="car_type" onchange="add_car(this);" > <option value="">please select</option> <option value="car_11">11111</option> <option value="car_22">22222</option> <option value="car_33">33333</option> <option value="car_44">44444</option> </select > <input type="text" id="ul_value" onclick="getulvalue();" name="ul_value" value=""> <script> function $$(id){ var obj=document.getElementById(id); return obj; } function del(n) { $$(‘ul‘).removeChild($$(n)); } function add(id,txt) { var ul=$$(‘ul‘); var li= document.createElement("li"); var href_a = document.createElement("a"); href_a.href="javascript:del(‘"+id+"‘);"; href_a.innerHTML ="del"; li.innerHTML=txt; li.id=id; li.appendChild(href_a); ul.appendChild(li); } www.jbxue.comfunction add_car(obj){ //chk ul childNodes length if($$(‘ul‘).childNodes.length<3){ var flag=true; var ul_obj=$$(‘ul‘).childNodes; var car_id=obj.options[obj.selectedIndex].value; var txt=obj.options[obj.selectedIndex].text; if(car_id!=null&&car_id!=""){ for(var i=0;i<ul_obj.length;i++){ if(ul_obj[i].id==car_id){ alert("已經添加！"); flag=false; } } if(flag){ add(car_id,txt); } } }else{ alert("只允許加入三個值!"); return; } } function getulvalue(){ if($$(‘ul‘).childNodes.length==0){ alert("請選擇相關內容!"); return; }else{ var txt=""; for(var i=0;i<$$(‘ul‘).childNodes.length;i++){ txt+=$$(‘ul‘).childNodes[i].id+","; } $$("ul_value").value=txt; } } </script>