Add and delete the text box for adding information on the page]

Content on the page:

When you click add or delete, the corresponding operation will be performed.

 

HTML code of the page

1 <li id = "clid"> 2 <div> 3 name: <input type = "text" name = "guestname" class = "dfinput" style = "width: 150px; "/> 4 & nbsp; Country: <input name =" gueststate "type =" text "class =" dfinput "style =" width: 150px; "> 5 & nbsp; Gender: & nbsp; <select name = "guestsex"> 6 <option value = "0"> select </option> 7 <option value = "1"> male </option> 8 <Option value = "2"> female </option> 9 </SELECT> 10 & nbsp; & nbsp; Unit <input type = "text" name = "gusetunit" class = "dfinput" style = "width: 150px; "/> 11 & nbsp; Title: <input type = "text" name = "guestjob" class = "dfinput" style = "width: 150px; "/> 12 <input type =" button "value =" delete "onclick =" del (this ); "> <input type =" button "value =" add "onclick =" add (); "> 13 </div> 14 </LI>

View code

JavaScript code for dynamic addition and deletion (jquery)

1 <SCRIPT type = "text/JavaScript"> 2 // dynamically add External Object 3 function add () {4 // obtain the object to be cloned 5 var clonediv =$ ("# clid Div "). eq (0); 6 // clone 7 var newdiv = clonediv. clone (); 8 // Add 9 // Add a blank value before 10 $ ("input [type = 'text']", newdiv ). val (""); 11 // Add 12 newdiv. appendto ("# clid"); 13 14} 15 16 17 // Delete 18 function del (BTN) {19 // get the object to be deleted 20 var deldiv =$ (BTN ). parent (); 21 // when the last one is deleted, 22 var lastdiv =$ ("# clid Div"); 23 if (lastdiv. length> 1) {24 deldiv. remove (); 25} 26} 27 </SCRIPT>

View code

 

Add and delete the text box for adding information on the page]