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.com
function 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> 

JS动态增加删除UL节点LI,布布扣,bubuko.com