JQuery, the number of increments when adding dynamically added elements

Question

I’m probably mistaken, but here. I have a form that you fill out with a section in the middle that allows you to add additional addresses using the "Add more" button.

My html:

<div class="address">
   <div class="street">
      <input type="text" name="street[]">
   </div>
   <div class="city">
      <input type="text" name="city[]">
   </div>
   <div class="addmoreadd">
      <button type="button" id="addmore">Add More Address</button>
   </div>
</div>

JQuery

var rowNum = 0;

$("#addmore").click(function() {
      rowNum++;
      $('.address').attr('id', 'address' + rowNum);
      var html = $('.address').html();
      jQuery('.address').append(html)
      var rm = "<button type='button' class='btn' id='rmbtn'>Remove</button>"
      $('addmoreadd').append(rm);  

      $('#rmbtn').click(function() {
        $('#address' + rowNum).remove();
     }); 
 });

I'm new to jquery, so I'm still learning the syntax and function, but here I am trying to add additional address fields each time I click the “add more addresses” button, increase the parent div <div class="address">by adding the identifier # to identify the number for the “Delete” button for the search. I want the user to be able to delete only additional addresses after the first default address.

, , "" . ( # address0).

, !

EDIT: , , :

http://jsfiddle.net/F4UhN/

Answer 1

. , , , , . , , @medhi:

$("body").on("click", ".addmore", function() { ... });

, . , , , : , . :

<div id="addresses">
  <div class="address" id="address0">
  ...
  </diV>
  <div class="address" id="address1">
  ...
  </diV>
  ...
</diV>

, , . .

.

HTML:

<div id="addresses">
    <div class="address" id="address0">
       <div class="street">
           <input type="text" name="street[]" />
       </div>
       <div class="city">
           <input type="text" name="city[]" />
       </div>
       <div class="addmoreadd">
          <button type="button" class="addmore">Add More Address</button>
       </div>
    </div>
</div>

JavaScript:

var rowNum = 0;

$("body").on("click", ".addmore", function() {
      rowNum++;
      var $address = $(this).parents('.address');
      var nextHtml = $address.clone();
      nextHtml.attr('id', 'address' + rowNum);
      var hasRmBtn = $('.rmbtn', nextHtml).length > 0;
    if (!hasRmBtn) {
      var rm = "<button type='button' class='rmbtn'>Remove</button>"
      $('.addmoreadd', nextHtml).append(rm);
    }
      $address.after(nextHtml); 
 });

$("body").on("click", ".rmbtn", function() {
    $(this).parents('.address').remove();
});

Answer 2

, .

http://jsbin.com/moweluwu/1/edit

div , , div.

var count=1;
$("#add").click(function(){
    var html="<div id='div"+count+"'><input type='text'></input><button onclick=foo('"+count+"')>Remove</button></div>";
    $("#addresses").append(html);

    count++;
});

function foo(which){
    $("#div"+which).remove();
}

Answer 3

$("body").on("click", ".addmore", function() { //code here });

. DEMO

$("body").on("click", ".addmore", function() {
    rowNum++;
    var row = $("<div id='address-"+rowNum+"' class='address' />");
    var street = $("<div class='street'><input type='text' name='street[]'></div>");
    var city = $("<div class='city'><input type='text' name='city[]'></div>");
    var rm = $("<button type='button' class='addmore'>Add More Address</button>"); 
    $("body").append(row);
    street.appendTo(row);
    city.appendTo(row);
    rm.appendTo(row);

 });

Answer 4

html- , " ".

, .

Example

<style>
#basicAdress, #manyAddress .addressContainer:first-child .remove{
    display: none;    
}
</style>
<div id="basicAdress">
<div class="addressContainer">
    <p><label>Address</label><input type="text" class="txtAddress"/> <input type="button" class="remove " value="Remove" /></p>    
</div>
</div>

<div id="manyAddress">

</div>
<div>
    <input type="Button" id="addMore" value="Add more" />
    <input type="button" value="Send address" id="sendAddress" />
</div>

<div id="outputAddress">
</div>

<script>
jQuery(document).ready(function(){
jQuery('#basicAdress .addressContainer:eq(0)').clone().appendTo('#manyAddress');


jQuery('.remove').on('click',function(){
    jQuery(this).parent().remove();
});

jQuery('#addMore').click(function(){
    jQuery('#basicAdress .addressContainer:eq(0)').clone().appendTo('#manyAddress');
});

jQuery('#sendAddress').click(function(){
    jQuery('#outputAddress').html('');
    jQuery('#manyAddress .addressContainer').each(function(i, v){
        jQuery('#outputAddress').append(
            "<p>" + (i+1) + '. ' + jQuery(this).children().find('.txtAddress').val()+ "</p>"
        );
    });
});
});

</script>