在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5  HTML/ JQ 如何嵌套 動(dòng)態(tài)刪除與新增input框

JQ 如何嵌套 動(dòng)態(tài)刪除與新增input框

問題描述

JQ 如何嵌套 動(dòng)態(tài)刪除與新增input框，但一層點(diǎn)擊新增刪除input框都OK?，F(xiàn)在問題是套一層。

相關(guān)代碼

<!DOCTYPE html>
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQ動(dòng)態(tài)刪除與新增input框</title>
<link rel="stylesheet" >
<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="增加一個(gè)表"/>
<div id="spots">
    <input type="text" name="" placeholder="請(qǐng)輸入表名">
    <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>

我希望的結(jié)果是這樣的

圖片描述

回答
編輯回答
萌吟

新增的元素不要加id,通過class選擇器，不然頁面會(huì)有多個(gè)相同id,這會(huì)出問題的

2017年3月10日 05:47
編輯回答
神經(jīng)質(zhì)

還是自己回答自己問題吧！
直接拿去用，哈哈哈！
<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>* 選項(xiàng) *</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=\"增加選項(xiàng)\" onclick=\"qus[" + this.qno + "].addOption()\"/>";
            qstr += "<input type=\"button\" value=\"刪除選項(xiàng)\" 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>

放一個(gè)成品：
圖片描述

2018年5月23日 04:41