如何附加整个<div> </div>

Question

    <div class="rows">
       <input type="text" id="ip1" class="ip1">
       <input type="text" id="ip2" class="ip2">
       <input type="button" value="Delete" id="del" class="del">                        
    </div><!--Rows-->

    <script>
      $(document).ready(function(e){
         $("#add").click(function(e){
            $(".rows").append('<input type="text" id="ip1" class="ip1">'+
            '<input type="text" id="ip1" class="ip1">'+
            '<input type="button" alue="Delete" id="del" class="del">');
         });
      });
    </script>

我是用这种方法做的。有没有其他好的方法，如附加整个div。 如果我点击删除按钮，我需要单独删除该行， 感谢

Answer 1

您可以使用clone()方法执行此操作。

$(document).ready(function(e){
   $("#add").click(function(e){
     var clone = $(".rows:first").clone();
     $(".rows:last").after(clone);
   });
   $(document).on('click','.del', function(){
      if ($('.rows').length > 1) 
       $(this).closest('.rows').remove();
   })
});

Demo

附注：id在文档中应该是唯一的，因此您应该在动态添加的模板中使用类

Answer 2

您需要另一级div：

<div class="rows">
    <div class="row">
        <input type="text" id="ip1" class="ip1">
        <input type="text" id="ip2" class="ip2">
        <input type="button" value="Delete" id="del" class="del">                        
    </div>
</div>

然后你的脚本将是：

  $(document).ready(function(e){
     $("#add").click(function(e){
       $(".rows").append('<div class="row"><input type="text" id="ip1" class="ip1">'+
                        '<input type="text" id="ip1" class="ip1">'+
                        '<input type="button" alue="Delete" id="del" class="del">' +
                        '</div>');
     });
  });

您还需要修复代码，以便在每行中分配唯一ID。或者省略ID - 你可能不需要它们。

要删除，您需要使用.on()委托，以便它适用于动态添加的元素。

$(".rows").on("click", ".del", function() {
    $(this).closest(".row").remove();
});

Answer 3

我建议为模板使用单独的元素（这样你就可以删除所有记录）

JSFiddle：http://jsfiddle.net/TrueBlueAussie/rBLkp/1/

$(document).ready(function(e){
   $("#add").click(function(e){
     $(".rows:last").append($('#template').html());
   });
   $(document).on('click','.del', function(){
      $(this).closest('.row').remove();
   })
});

说明：

• 删除无法复制的ID
• 我添加了一个行包装器，将控件分组为行
• 我将模板行存储为未知类型的虚拟脚本块（因此浏览器忽略它）
• 它使用委派的on来捕获删除按钮

如果您需要唯一ID，请在模板中使用占位符并使用简单文本替换来插入它。

e.g。

$(".rows:last").append($('#template').html().replace("{id}", yourNewIdHere));

委托on事件处理程序（说明）：

e.g。

$(document).on('click','.del', function(){event code});

委托事件处理程序通过侦听冒泡到不变的祖先的事件来工作。它然后应用jQuery过滤器，它然后将该函数应用于导致该事件的的任何元素。这是附加到尚不存在的元素的好方法。

如果没有更接近的“不变”祖先，

document是连接它的默认位置。在您的示例中，您可以将其连接到.rows

e.g。

$('.rows').on('click','.del', function(){event code});

注意：永远不要将委派的事件处理程序连接到'body'，因为它对某些事件有奇怪的行为。

Answer 4

不要使用唯一ID或在这种情况下使用类，这足以处理dom元素

var count = 0;
$("#add").click(function (e) {
    count++;

       $(".rows").append('<div><input type="text" id=ip' + count + ' class=ip' + count + '/><input type="text" id="ipsecond' + count + ' class="ipsecond' + count + '/> <input type="button" alue="Delete"  class="del"value ="delete"/></div>');


});

DEMO DELETE

删除

$(".rows").on("click",".del",function(){
$(this).closest("div").remove();

});

Answer 5

为了避免重复的ID，您可以这样做：http://jsbin.com/xotoyogo/1/edit?html,js,output

JS：

  $(document).ready(function(e){
         $("#add").click(function(e){
           var newId = $('.row').length + 1;

           $(".container")
           .append('<div class="row"><input type="text" id="ip' + newId+'" class="ip1"> '+
          '<input type="text" id="ip'+newId+'" class="ip1"> '+
          '<input type="button" value="Delete" id="del'+newId+'" class="del"></div>');
         });
      });

HTML：

<div class="container">
<div class="row">
       <input type="text" id="ip1" class="ip1">
       <input type="text" id="ip2" class="ip2">
       <input type="button" value="Delete" id="del" class="del"> 

    </div><!--Rows-->
  </div>
  <button id="add">add</button>