jquery - How to append the whole <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>

I Did this using this method. Is there any other good method like appending the whole div. and i need to delete that row alone if i click delete button, Thanks

Answer 1

To avoid duplicated id's you can do that in this way : 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>