jquery adds HTML tags with styles-JS Tutorial-php.cn

This time I will bring you jquery to add styledHTML tags, what are theprecautionsfor jquery to add styled HTML tags, the following is a practical case, one Get up and take a look.

is as follows:

  上传计划单

Copy after login

The function we hope to achieve is: when the "Add" button is clicked, when the plan is uploaded Add aFile Uploadform to upload the schedule below, and there is a "Delete" button behind the new file upload form. When the "Delete" button is clicked, the newly added file can be uploaded. The form is deleted.

After clicking the "Add" button, a new form for uploading attachments and a delete button can be added.

When the "Delete" button is clicked, a new form for uploading attachments and a delete button can be added. will be deleted together

The code to achieve the above effect is: bind a click event to the "Add" button: onclick="plusFile()", when the "Add" button is clicked, plusFile will be triggered ()function. The function of the function is: first obtain the p whose id is otherFile through $("#otherFile"), and then add HTML elements to this p through the append function of jquery. The HTML elements to be added are:

Copy after login

The function is as shown in the following code:

/**********添加多文件上传************/ function plusFile(){ $("#otherFile").append("
"); }

Copy after login

Then bind a click event to the "Delete" button: onclick='deleteCurrent(this)', when the "Delete" button is clicked, it will be triggered deleteCurrent(this) function. The function of this function is: first receive the parameter passed by this, then obtain the object where the "Delete" button is located through $(obj), and then obtain the parent element of the "Delete" button through $(obj).parent(), that is, < ;p>The newly added element is finally deleted through jquery's remove() function.

The function code is as follows:

/**********删除多文件上传***********/ function deleteCurrent(obj){ $(obj).parent().remove(); }

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!