首页 > 代码库 > 表单处理之添加删除表单行
表单处理之添加删除表单行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="search_conditions">
<div class="condition">
<a onclick="AddCondition(this,‘#search_conditions‘)">+</a>
<input />
</div>
</div>
<script src="http://www.mamicode.com/js/jquery-1.8.2.min.js"></script>
<script>
function AddCondition(ths,container){
//ths 这里指<a></a>标签
var cp = $(ths).parent().clone();
//克隆标签<a></a>父标签并赋给变量cp
cp.children(‘:first‘).text(‘-‘).attr(‘onclick‘,"RemoveCondition(this,‘#search_conditions‘)");
//获取父标签第一个孩子a标签中的内容然后通过text将内容修改为‘-‘,
//接着通过attr修改onclick绑定的函数AddCondition为RemoveCondition
$(‘#search_conditions‘).append(cp);
//将克隆后的结果cp追加到父标签中
//cp.appendTo(‘#search_conditions‘)
}
function RemoveCondition(ths,container){
//ths形参代表标签<a></a>，所以标签a的父标签为<div class="condition"></div>，
//然后删除整个父标签从而实现删除整个表单的功能
$(ths).parent().remove();
}
</script>
</body>
</html>
演示效果:
本文出自 “平平淡淡才是真” 博客，请务必保留此出处http://ucode.blog.51cto.com/10837891/1851434
表单处理之添加删除表单行