Нажмите, чтобы удалить родительский div

Question

Я борюсь за что-то, что кажется довольно простым, хотя я не вижу, что делаю неправильно.

Я хочу, чтобы onClick определенный div был клонирован до максимума 4 раза. (Пока это так хорошо), и я хочу, чтобы кнопка удаления удаляла один из вставленных div.

И моя проблема прямо там. Я не могу заставить кнопку удаления работать.

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> 

Посмотрите на my fiddle.

(я начал с this example)

Answer 1

Есть две проблемы с вашим JavaScript

1. Вы Прикрепление click event handler к неправильному элементу. Элемент, который вы прикрепляете, даже не отображается на странице и никогда не нажимается.
2. Ваша строка, в которой вы пытаетесь удалить выбранный контент, неверна. $(this).parent().remove() достаточно.

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

Вам нужно добавить новую OnClick функцию во время первого, и изменить селектор, как это:

$(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 3

Изменение слушателя событий на следующее:

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

Working Example.

Я сделал два изменения:

1. Изменить $(wrapper) в $("#clone_wrapper"). К слою обертки добавляются ссылки .remove_field, а не сама обертка (от appendTo($('#clone_wrapper')))
2. Изменить $(this).parent().sibling('#content') на $(this).parent(). Родитель :#content — Вы не хотите удалять его родного брата.

Answer 4

Я реорганизовал ваш код, который является более чистым и эффективным. объяснения в комментарии.

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/