JS 动态增加删除UL节点LI及相关内容的解决办法

这篇文章主要为大家详细介绍了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> 
/**
 * 动态增加删除UL节点LI
 *
 * @param 
 * @arrange （www.idcnote.com）
 **/
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); 
} 

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及相关内容的简单示例的内容就先介绍到这里，更多相关文章的可以留意