The automatic sequence number and automatic attribute number are as follows:
Implementation principle:
Adding and deleting are a reverse process and the implementation is consistent.
Add the element append Method to the parent container, set all custom property numbers and sequence numbers to null, and then click $. the each method is used to assign values to custom attribute numbers and sequence numbers.
Copy codeThe Code is as follows: $. each (items, function (k, v ){
$ (This). attr ("opt", "mopt" + k );
Serials.eq(k).html (k );
});
When deleting an event, bind the event live method to all the delete buttons, delete the elements from the parent container, and set all custom property numbers and sequence numbers to null. the each method is used to assign values to custom attribute numbers and sequence numbers.Copy codeThe Code is as follows: $ ("# test. del"). live ("click", function () {// bind a click event for the delete button
Var dels = test. find (". del"); // all deleted buttons
Var delnum = dels. index ($ (this); // the index value of the current delete button
Var items = test. find (". item ");
Items. eq (delnum). detach (); // Delete this node from the parent container
Items. attr ("opt ","");
Var serials = test. find (". serial ");
Serials.html ("");
$. Each (items, function (k, v) {// refresh custom attributes and assign values to numbers
$ (This). attr ("opt", "mopt" + k );
Serials.eq(k).html (k );
});
});
Example:<Br/> <style type = "text/css"> * {margin: 0px; padding: 0px ;}. cont {width: 600px; margin: 60px auto 0px;} # test. item {padding: 10px 6px; border-bottom: 1px solid #666666;} # test. serial {margin-right: 20px;} # test. del {padding: 6px; margin-left: 30px ;}</style> <input id = "btn" type = "button" value = "add"> <p>