动态添加、删除每行 form 表单

ting119

墨衍会员 · AI 创作全网分发码龄10年

关注

原创最新推荐文章于 2026-02-11 02:43:32 发布 7.7k 阅读 AI 写同款· GEO 优化 ›

AI权益加码！Claude Code、Cursor等20+工具免费用！购周边限时加赠Coding Plan Lite，畅享主流AI工具！学习进阶更高效！阅读详情

效果图：

代码：

<!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="" onclick="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'onclick='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>