Click the button to add or delete a line of instance code.

Click the button to add or delete a line of instance code.

Click the button to add or delete a line of instance code:
The website has a lot of selection space when entering the expression, and you can even add the content you want to add. For example, you can click a button to add an expression item. If you don't need it, you can click a button to delete it, the following describes how to achieve this effect.
The code example is as follows:

 

<! DOCTYPE html> 
 
The above code achieves what we want and can delete and or Add rows. The following describes the implementation process.
I. Implementation principle:
The principle is relatively simple. When you click the Add button, the appendTo () function is used to add a row to the table. When you click the delete button, you can delete the parent element of the current button, in fact, the current row where the button is located is deleted. For details, refer to the Code annotations.
Ii. Code comments:
1. $ (function () {}). After the document structure is fully loaded, run the code in the function.
2. var show_count = 20. Declare a variable and assign a value to specify the maximum number of rows.
3. var count = $ ("input: text"). val (), the value attribute value of the first text box, that is, the first id value.
4. var fin_count = 0. Declare a variable and assign the initial value to 0.
5. $ ("# btn_addtr"). click (function () {}) to register the click event processing function for the Add button.
6. fin_count = $ ("tr"). length-1. Assign the total number of rows except the row with the title to the variable fin_count.
7. if (fin_count <show_count), determine whether the total number of rows excluding the title row is smaller than the specified number of rows.
8. $ ("tr: eq (1)"). clone (). appendTo ("table"), clone the first row, and append it to the end of the table.
9. $ ("tr: last td input: first"). val (++ count);, set the row id.
10. function deltr (obj) {}. This function is used to delete a row. The parameter is an object passed.
11. var length = $ ("tr"). length, get the total number of rows.
12. if (length <= 2) {alert ("keep at least one row")}. if the total number of rows is less than or equal to 2, a prompt is displayed.
13. $ (arguments [0]). parent (). parent (). remove ();, delete the parent element of the current button, that is, the current row.
Note: arguments [0] is the first parameter passed by the function, that is, the button object "this.
Iii. Related reading:
1. $ ("input: text") refer to jQuery's: text selector chapter.
2. For more information about the val () function, see the val () method section of jQuery.
3. $ ("tr: eq (1)") refer to the: eq () selector section of jQuery.
4. For details about the clone () function, refer to the clone () method section of jQuery.
5. For details about the appendTo () function, refer to the appendTo () method section of jQuery.
6. $ ("tr: last td input: first") refer to jQuery's: last selector and jQuery's: first selector.
7. For more information about arguments, see section 1 about arguments objects in javascript.
8. For details about the parent () function, see section 1 of the parent () method of jQuery.
9. For the remove () function, see the remove () method section of jQuery.
The original address is: http://www.softwhy.com/forum.php? Mod = viewthread & tid = 10596.
For more information, see: http://www.softwhy.com/jquery/