下面我就为大家分享一篇jquery动态添加带有样式的html标签元素方法,具有很好的参考价值,希望对大家有所帮助。
如下所示:
| 上传计划单 | |
希望实现的功能是:当点击“添加”按钮时,在上传计划单的下面再增加一条上传计划单的文件上传表单,且新增的文件上传表单后面有一个“删除”按钮,当点击“删除”按钮时,可将刚刚新增的文件上传表单删除掉。效果如下图所示:

点击“添加”按钮后,可以新增一个上传附件的表单,以及一个删除按钮,效果如下图所示:

点击“删除”按钮时,新增的上传附件表单以及此删除按钮,将一并被删掉,效果如下图所示:
立即学习“前端免费学习笔记(深入)”;

实现上面效果的代码是:给“添加”按钮上绑定一个点击事件:onclick="plusFile()",当点击“添加”按钮时,将触发plusFile()函数。函数的作用是:首先通过$("#otherFile")获取id是otherFile的p,然后通过jquery的append函数,为此p添加HTML元素,所要添加的HTML元素为:
函数如下代码所示:
/**********添加多文件上传************/
function plusFile(){
$("#otherFile").append("");
}然后再给“删除”按钮绑定一个点击事件:onclick='deleteCurrent(this)',当点击“删除”按钮时,将触发deleteCurrent(this)函数。此函数的作用是:首先接收this传递过来的参数,然后通过$(obj)获取“删除”按钮所在的对象,再通过$(obj).parent()获取“删除”按钮的父元素,即
新增的元素,最后通过jquery的remove()函数,将此
传媒企业网站系统使用热腾CMS(RTCMS),根据网站板块定制的栏目,如果修改栏目,需要修改模板相应的标签。站点内容均可在后台网站基本设置中添加。全站可生成HTML,安装默认动态浏览。并可以独立设置SEO标题、关键字、描述信息。源码包中带有少量测试数据,安装时可选择演示安装或全新安装。如果全新安装,后台内容充实后,首页才能完全显示出来。(全新安装后可以删除演示数据用到的图片,目录在https://
元素删除掉。
函数代码如下所示:
/**********删除多文件上传***********/
function deleteCurrent(obj){
$(obj).parent().remove();
}这样就完成了上面所希望实现的功能了。
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:










