如何使用javascript动态生成div的id

时间:2017-06-20 14:48:59

标签: javascript jquery

我有一个(+)符号和一个( - )符号。如果用户单击+号,那么行中的任何内容都将自动生成与新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

1 个答案:

答案 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样本供您参考