问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

JQ 如何嵌套 动态删除与新增input框

头像
this_MyFunction
    42722448

    问题描述

    JQ 如何嵌套 动态删除与新增input框，但一层点击新增删除input框都OK。现在问题是套一层。

    相关代码

    <!DOCTYPE html>
    <html>
    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQ动态删除与新增input框</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js" type="text/javascript"></script>
<style>
    .spot{float: left;width:200px;height: 40px;}
</style>

    </head>
    <body>

    <input type="button" id="" value="增加一个表"/>
<div id="spots">
    <input type="text" name="" placeholder="请输入表名">
    <input type="button" id="add" name="add" value="增加字段"/>
    <input type="button" id="del" name="del" value="删除表"/><br/>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $("input#add").click(function () {
            $('div#spots').append(
                '<div class="spot">' +
                '<input type="text" name="ckname" /> ' +
                '<i class="fa fa-minus-circle" id="del" style="cursor:pointer;color:#FF1F1F"></i>' +
                '</div>'
            )
                .find("i#del").click(function () {
                    $(this).parent().remove();
                });
        });
        $("input#del").click(function () {
            $('div#spots').remove();
        });
    })
</script>

    </body>
    </html>

    我希望的结果是这样的

    图片描述

    html5javascript
    阅读 3.1k
    2 个回答
    得票最新
    头像
    this_MyFunction
      42722448
      ✓ 已被采纳

      还是自己回答自己问题吧！
      直接拿去用，哈哈哈！
      <html>
      <head>

      <title></title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script language="javascript">
    var qus = new Array();
    function Question() {
        this.qno = qus.length;
        this.ono = 0;
        this.create = function (table) {
            var qstr = "";
            qstr += "<hr id=\"qu" + this.qno + "div\"><div id=\"qu" + this.qno + "\"><h2>问题  " + (this.qno + 1) + "</h2>";
            qstr += "<input type=\"text\" name=\"questions[" + this.qno + "]\" value=\"questions[" + this.qno + "]\" />";
            qstr += "<div id=\"qu" + this.qno + "op\"><b>* 选项 *</b>";
            qstr += "<br /><input type=\"text\" value=\"qu" + this.qno + "op" + this.ono + "\" id=\"qu" + this.qno + "op" + this.ono + "\"/>";
            qstr += "</div>";
            qstr += "<input type=\"button\" value=\"增加选项\" onclick=\"qus[" + this.qno + "].addOption()\"/>";
            qstr += "<input type=\"button\" value=\"刪除选项\" onclick=\"qus[" + this.qno + "].delOption()\"/>";
            qstr += "</div>";
            table.innerHTML += qstr;
            //alert(qstr);
        }
        this.addOption = function () {
            this.ono++;
            var opar = document.getElementById("qu" + this.qno + "op");
            opar.innerHTML += "<br id=\"qu" + this.qno + "op" + this.ono + "div\"/><input type=\"text\" value=\"qu" + this.qno + "op" + this.ono + "\" id=\"qu" + this.qno + "op" + this.ono + "\"/>";
            //alert(opar.innerHTML);
        }
        this.delOption = function () {
            if (this.ono > 0) {
                var quop = "qu" + this.qno + "op";
                var opx = "qu" + this.qno + "op" + this.ono;
                document.getElementById(quop).removeChild(document.getElementById(opx));
                document.getElementById(quop).removeChild(document.getElementById(opx + "div"));
                this.ono--;
            }
        }
    }

    function createQuestion() {
        var qu = new Question();
        qus.push(qu);
        qu.create(document.getElementById('table'));
    }

    function delQuestion() {
        if (qus.length > 0) {
            var qupr = "table";
            var qux = "qu" + (qus.length - 1);
            document.getElementById(qupr).removeChild(document.getElementById(qux));
            document.getElementById(qupr).removeChild(document.getElementById(qux + "div"));
            qus.pop();
        }
    }
</script>

      </head>
      <body>

      <div id="table"></div>
<br />
<hr />
<br />
<input type="button" onclick="createQuestion();" value="新建问题" />
<input type="button" onclick="delQuestion();" value="删除问题" />

      </body>
      </html>

      放一个成品：
      图片描述

      头像
      frontoldman
        4.5k2220

        新增的元素不要加id,通过class选择器，不然页面会有多个相同id,这会出问题的

        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题