我有一个(+)符号和一个( - )符号。如果用户单击+号,那么行中的任何内容都将自动生成与新ID相同的内容。
现在,当用户点击+符号而非div ID时,其下的文本框将会更改。
div下面的代码如下:
<div class="row" id="Div0">
<div class="col-md-3">
<div class="form-group">
<label for="name">Last Name</label>
<input type="text" class="form-control" id="txtLastName0" placeholder="Enter name" required="required" />
</div>
</div>
<div class="col-md-9"></div>
</div>
现在,当用户点击+符号时,新文本框的新行将生成新的id txtLastName1。
现在点击+符号我如何获得文本框的新ID和带新行的div。
将生成Div1和textbox1
答案 0 :(得分:0)
基本上你应该做的是,在DOM中保留你想要作为模板生成的标记,当用户点击&#34;添加&#34;按钮,克隆此标记并附加到DOM(到容器div)。然后根据需要更新输入和div的Id。
简单的样本就像
width: 100%
现在将点击事件处理程序连接到添加/ +按钮。您可以使用jQuery <div class="row" id="template" style="display: none;">
<div class="col-md-3">
<div class="form-group">
<label for="name">Last Name</label>
<input type="text" class="form-control lname" id="txtLastName"
placeholder="Enter name" required="required" />
</div>
</div>
<div class="col-md-9"></div>
</div>
<button id="btnAdd">+</button>
<div id="container"></div>
方法。
clone()
要删除,可以在删除按钮上添加事件处理程序,并从dom中删除特定的div。 jQuery $(function () {
$("#btnAdd").click(function(e) {
e.preventDefault();
var childCount = $("#container").children().length;
var c = $("#template").clone().show();
c.attr("id", "Div" + childCount );
c.find(".lname").attr('id', 'txtLastName' + childCount);
$("#container").append(c);
});
});
方法会做到这一点。根据需要使用remove()
和closest()
来获取要删除的正确div。
Here是一个简单的jsbin样本供您参考