JS Dynamic Add Delete ul node Li and related content example

<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);
}

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 ("already added! ");
Flag=false;
}
}

if (flag) {
Add (Car_id,txt);
}
}

}else{
Alert ("Allow only three values to be added!");
Return
}
}

function Getulvalue () {
if ($$ (' ul '). childnodes.length==0) {
Alert ("Please select the relevant content!");
Return
}else{
var txt= "";
For (Var i=0;i<$$ (' ul '). childnodes.length;i++) {
txt+=$$ (' ul '). childnodes[i].id+ ",";
}
$$ ("Ul_value"). Value=txt;
}

}
</script>

Source: http://www.jb51.net/article/50294.htm

JS How to get ul Li id

document.getElementsByTagName ("Li") [index].id

How do I get the number of LI in ul with JavaScript?

document.getElementById (' Myul '). getElementsByTagName (' li '). length

HTML DOM removechild () method

var List=document.getelementbyid ("MyList"); List.removechild (List.childnodes[0]);

JS Dynamic Add Delete ul node Li and related content example