效果图:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<form role="form-group" style="display: inherit;width: 460px;margin-top: 20px;margin-left: 20px" id="tb">
帐号: <input type="text"
placeholder="请输入帐号">
密码: <input type="password"
placeholder="请输入密码">
<img src="add.png" alt="" οnclick="add()" style="width:30px">
</form>
<div class="btn btn-default" style="margin-top: 20px;margin-left: 200px">提交</div>
</body>
</html>
<script>
function add() {
var form = document.createElement("form-group");
form.id = new Date().getTime();
form.innerHTML = "<form role='form-group' style='display: inherit;width: 550px'>" +
"帐号: " + "<input placeholder='请输入帐号'/>" +
" 密码: <input placeholder='请输入密码'/>" +
"<img src='del.png'οnclick='del(this)' style='width:30px'></form>";
document.getElementById("tb").appendChild(form);
}
function del(obj) {
var formID = obj.parentNode.parentNode.id;
var form = document.getElementById(formID);
document.getElementById("tb").removeChild(form);
}
</script>