Click to remove Eltern div

Question

Ich kämpfe für etwas, das scheint ziemlich einfach, obwohl ich nicht sehe, was ich falsch mache.

Ich möchte das onClick ein bestimmtes div wird bis zum Maximum von 4 mal geklont. (So ​​weit so gut), und ich möchte einen Remove-Button haben, der einen der eingefügten divs löscht.

Und mein Problem ist genau dort. Ich kann den Remove-Button nicht funktionieren.

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> 

Werfen Sie einen Blick auf my fiddle.

(Ich habe angefangen mit this example)

Answer 1

Es gibt zwei Probleme mit Ihrem Javascript

1. Sie die click event handler falsche Element befestigt wird. Das Element, an das Sie anhängen, ist auf der Seite nicht sichtbar und wird nie angeklickt.
2. Ihre Zeile, in der Sie versuchen, den angeklickten Inhalt zu entfernen, ist falsch. $(this).parent().remove() ist genug.

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

Sie müssen die neue Onclick-Funktion während der ersten hinzuzufügen und Ihre Wähler wie folgt zu ändern:

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

ändern Ereignis-Listener auf die folgenden:

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

Working Example.

Ich habe zwei Änderungen vorgenommen:

1. ändern $(wrapper)-$("#clone_wrapper"). Die .remove_field Verknüpfungen werden dem Wrapper-Klon hinzugefügt, nicht der Wrapper selbst. (appendTo($('#clone_wrapper')))
2. Ändern Sie $(this).parent().sibling('#content') zu $(this).parent(). Das übergeordnete Objekt ist das #content — Sie möchten nicht, seine Geschwister zu entfernen.

Answer 4

Ich habe Ihren Code umstrukturiert, der sauberer und effektiver ist. Erklärungen sind im Kommentar.

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/