Je me bats pour quelque chose qui semble assez basique, même si je ne vois pas ce que je fais mal.

Je veux que l'onClick un certain div est cloné jusqu'au maximum de 4 fois. (Jusqu'ici tout va bien), et je veux avoir un bouton Supprimer qui supprime l'une des divs insérées.

Et mon problème est là. Je n'arrive pas à faire fonctionner le bouton Supprimer.

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>

Jetez un œil à mon violon .

(J'ai commencé avec cet exemple)

2
grcoder 8 août 2016 à 19:45

3 réponses

Meilleure réponse

Il y a deux problèmes avec votre javascript

  1. Vous attachez le click event handler au mauvais élément. L'élément auquel vous attachez n'est même pas visible sur la page et n'est jamais cliqué.
  2. Votre ligne où vous essayez de supprimer le contenu cliqué est incorrecte. $(this).parent().remove() suffit.

Voir Fiddle mis à jour

$(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--;
    })
});
4
Ozan 8 août 2016 à 16:57

Vous devez ajouter la nouvelle fonction onclick lors de la première et changer votre sélecteur comme ceci:

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

});
3
Cameron637 8 août 2016 à 16:57

J'ai refactorisé votre code, qui est plus propre et efficace. explications est en commentaire.

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/

1
Radian Jheng 8 août 2016 à 17:22