Click to remove parent div

Question

I'm struggling for something that seems pretty basic, though I'm not seeing what I am doing wrong.

I want that onClick a certain div is cloned till the maximum of 4 times. (So far so good), and I want to have a remove button that deletes one of the divs inserted.

And my problem is right there. I can't get the remove button to work.

JS

$(document).ready(function() {
  var max_fields      = 4; // maximum input boxes allowed
  var wrapper         = $("#addDriverContent div:first"); 
  var add_button      = $(".add_field_button"); // Add button ID
  var x = 0

  $(add_button).click(function(e) {
    e.preventDefault();
    // max input box allowed
    if(x < max_fields) {
      x++; 
      $(wrapper).clone().append('<a href="#" class="remove_field">Remove</a>').appendTo($('#clone_wrapper'));}
  });

  // user click on remove text
  $(wrapper).on("click",".remove_field", function(e) {
    e.preventDefault();
    $(this).parent().sibling('#content').remove();
    x--;
  })

});

HTML

<div id="addDriverContent" style="display:none;">
  <div id="content">
    Contents
  </div>
</div>

<button type="button" class="add_field_button" id="clone_button">ADD DRIVER</button>
<div id="clone_wrapper"></div>

Take a look at my fiddle .

(I've started with this example )

Answer 1

There are two problems with your javascript

1. You are attaching the click event handler to wrong element. The element you are attaching to is not even visible on page and is never clicked.
2. Your line where you try to remove the clicked content is wrong. $(this).parent().remove() is enough.

See Updated Fiddle

$(document).ready(function() {
    var max_fields = 4; //maximum input boxes allowed
    var wrapper = $("#addDriverContent div:first");
    var add_button = $(".add_field_button"); //Add button ID
    var x = 0

    $(add_button).click(function(e) {
        e.preventDefault();
        if (x < max_fields) { //max input box allowed
            x++;
            $(wrapper).clone().append('<a href="#" class="remove_field">Remove</a>').appendTo($('#clone_wrapper'));
        }
    });

    $(document).on("click", ".remove_field", function(e) { //user click on remove text
        e.preventDefault();
        $(this).parent().remove();
        x--;
    })
});

Answer 2

Change your event listener to the following:

$("#clone_wrapper").on("click",".remove_field", function(e) {
    e.preventDefault(); $(this).parent().remove(); x--;
});

Working Example .

I've made two changes:

1. Change $(wrapper) to $("#clone_wrapper") . The .remove_field links are added to the wrapper clone, not the wrapper itself (from appendTo($('#clone_wrapper')) )
2. Change $(this).parent().sibling('#content') to $(this).parent() . The parent is the #content — you don't want to remove its sibling.

Answer 3

You need to add the new onclick function during the first one, and change your selector like this:

$(document).ready(function() {
var max_fields      = 4; //maximum input boxes allowed
var wrapper         = $("#addDriverContent div:first"); 
var add_button      = $(".add_field_button"); //Add button ID
var x = 0

$(add_button).click(function(e) {
e.preventDefault();
 if(x < max_fields){ //max input box allowed
            x++; 
        $(wrapper).clone().append('<a href="#" class="remove_field">Remove</a>').appendTo($('#clone_wrapper'));
        $(".remove_field").click( function(e){ //user click on remove text
            e.preventDefault(); 
            $(this).parent().remove(); 
            x--;
        })
    }
});

});

Answer 4

I refactored your code, which is more clean and effective. explanations is in comment.

HTML

<div id="addDriverContent" style="display:none;">

    <!-- if your element is going to cloned, use class instead of id. id should always be unique. -->
    <div class="content">

        <!-- because your content is already invisible, why note put your remove btn in it? -->
        <a href="#" class="remove_field">Remove</a>

    </div>
</div>

<button type="button" class="add_field_button" id="clone_button">ADD DRIVER</button>

<div id="clone_wrapper"></div>

JS

$(function($) {

var max_fields        = 4; 

// origin selector would select all the first div ancestors.
var $content          = $("#addDriverContent > .content");     

var $clone_wrapper    = $("#clone_wrapper") ;

var $add_button       = $(".add_field_button"); //Add button ID

$add_button.click(function(e) {
    e.preventDefault();

    // jquery object is array liked object. Length mean how many elements is selected.
    if ( $clone_wrapper.children(".content").length < max_fields ) 

      $content.clone().appendTo($clone_wrapper);
});

$clone_wrapper.on("click",".remove_field", function(e){ 
    e.preventDefault(); 

    // this would be more specific.
    $(this).parent(".content").remove(); 
})

});

https://jsfiddle.net/xm4sesa2/10/