如何附加整个 <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

为避免重复的 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>

Answer 2

您可以改用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 3

不要使用唯一的 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 4

你需要另一个级别的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 5

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

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，请在模板中使用占位符并使用简单的文本替换来插入它。

例如

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

委托on事件处理程序（解释）：

例如

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

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

document 是连接它的默认位置，如果没有更接近的“不变”祖先。在您的示例中，您可以将其连接到 .rows

例如

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

注意：切勿将委托的事件处理程序连接到 'body'，因为它对某些事件有奇怪的行为。