I'm probably going about this wrong but here goes. I have a form that you fill out with a section in the middle that lets you add more addresses with an "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 syntax and function but here I am trying to append the extra address fields on each click of the "add more address" button, increment the parent div <div class="address"> by adding an id # to identify the number for the Remove button to locate. I want the user to be able to only remove additional addresses after the first default address.

This executes ok when the add more address button is clicked once, afterwards it keeps adding more Remove buttons next to each other. Also when adding more address fields the id's are the same (rows of #address0).

Please guide me o the right direction!

EDIT: Here is the original example that I had that wasn't working with an add more phone button:

/

I'm probably going about this wrong but here goes. I have a form that you fill out with a section in the middle that lets you add more addresses with an "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 syntax and function but here I am trying to append the extra address fields on each click of the "add more address" button, increment the parent div <div class="address"> by adding an id # to identify the number for the Remove button to locate. I want the user to be able to only remove additional addresses after the first default address.

This executes ok when the add more address button is clicked once, afterwards it keeps adding more Remove buttons next to each other. Also when adding more address fields the id's are the same (rows of #address0).

Please guide me o the right direction!

EDIT: Here is the original example that I had that wasn't working with an add more phone button:

http://jsfiddle.net/F4UhN/

• javascript
• jquery
• html

• 3 You are dynamically creating these DOM elements, you should be using the .on() method of jQuery, rather than .click(). – DevlshOne Commented May 16, 2014 at 16:17
• @DevlshOne Alright, but how about the increments? – Noobtastic Commented May 16, 2014 at 16:27
• Could you please upload the complete problem at JSfiddle,I am unable to identify the exact needs. – Hardeep Mehta Commented May 16, 2014 at 16:27
• 1 You just completely changed the code! – Djizeus Commented May 16, 2014 at 17:00
• 1 For future reference, please carefully consider substantial changes to your question after it has already received answers. While no one is forbidding you to make changes, it can make the answers seem disjointed from the question. If your question has changed substantially, it's generally a good idea to post a new question (perhaps linking to the old one, if relevant). – JDB Commented May 17, 2014 at 4:40

5 Answers 5

There are several problem in your current code. One of them is that, as stated by others, the add and remove buttons are created dynamically, so you cannot just simply attach the click handler to the button. You have to either re-attach the handler anytime you create a button, or attach the handler to the body as shown by @medhi:

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

One other problem is that the container of the form has no separate container for each address. So when you duplicate the form elements, you duplidate ALL the elements already created: the number of elements double each you click on add. A solution to this is to wrap the address forms in separate containers:

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

And one third problem is that when you duplicate an form, it may already contain a delete button if it is not the first form. In that case you should skip the delete button creation.

Below is a complete working solution.

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();
});

You could follow a similar implementation as to what is shown here.

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

You just wrap the new addresses in a div and add a remove button that passes the count that corresponds to the 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();
}

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

see 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);

 });

Use $("").children().length for your incrementer.

HTML:

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

JavaScript:

$("#address-container").append('<div id="address-'+$("#address-container").children().length+'" class="address"><div class="street"><input type="text" name="street[]"></div><div class="city"><input type="text" name="city[]"></div></div>')

You could have a base html markup for address fields, clone it and append it to an "Address container".

When the user has added all needed address, you could iterate the address components and get the values.

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>