Comment supprimer les éléments div de l'arbre DOM un par un ?

Question

Voici mon exemple .

En cliquant sur le bouton d'ajout, j'ajoute une carte d'utilisateur. En cliquant sur le bouton "Effacer", je supprime toutes les cartes. Comment supprimer les cartes une par une en cliquant sur l'icône "fermer" de chaque carte ?

Fichier HTML

<div class="header">
  <button id="clear" class="button clear">Clear</button>
  <button id="button" class="button add">Add user</button>
</div>
<div id="content">
</div>

Fichier JS

var root = 'https://jsonplaceholder.typicode.com';
var index = 0;
$.ajax({
  url: root + '/posts/1/comments',
  method: 'GET'
}).then(function(data) {
  $("#button").click(function() {
  var notificationMessage = "Oops, there are no more user cards to display";
  if (index >= data.length ) {
    return alert(notificationMessage);
  }
  $("#content").append('<div id="card"><div class="title"><div class="image"></div><div id="name">'
    + data[index].name + '</div><span id="close"></span></div><div id="description">'
    + data[index].body + '<a href="mailto:" id="email">'
    + data[index].email + '</a></div></div>'
  );
  index++;
  // remove all cards from a list and return index equally [0], to be able add user card again.
  $("#clear").click(function() {
    $("#card").remove();
    index = 0;
  });
});
});

//How to remove card by clicking on the close button?

Answer 1

Avez-vous essayé d'utiliser la classe dans card élément ? parce que id le sélecteur n'obtient que le premier élément correspondant

$.ajax({
    url: root + '/posts/1/comments',
    method: 'GET'
  }).then(function(data) {        
    $("#button").click(
      function() {
        var notificationMassage = "Oops, there are no more user cards to display";

        if (index >= data.length ) {
          return alert(notificationMassage);
        }

        $("#content").append('<div class="card"><div class="title"><div class="image"></div><div class="name">'
              + data[index].name + '</div><span class="close"></span></div><div class="description">' 
              + data[index].body + '<a href="mailto:" id="email">'
              + data[index].email + '</a></div></div>'
         );
        index++;

        // remove all cards from a list and return index equally [0], to be able add user card again.
        $("#clear").click(function() {
          $("#content").html('');
          index = 0;
        }); 
    });

pour les supprimer un par un, ajoutez ce code

        // remove one cards from a list.
        $("#content").on("click", ".close", function() {
          $(this).closest('div.card').remove();
        });

Answer 2

Tout d'abord, les identifiants doivent être uniques. Je recommande de changer les vôtres en classes.

$("#content").append('<div class="card"><div class="title"><div class="image"></div><div class="name">'
          + data[index].name + '</div><span class="close"></span></div><div id="description">' 
          + data[index].body + '<a href="mailto:" id="email">'
          + data[index].email + '</a></div></div>'
     );

Maintenant que nous avons toutes les icônes proches de la classe close Nous pouvons donc ajouter l'auditeur suivant pour tous les utilisateurs .close pour ne retirer que la carte qui les contient.

$(document).on('click', '.close', function(){
    $(this).closest('.card').remove(); // remove only closest '.card'
});

Answer 3

Vous pouvez utiliser ce code pour mettre en œuvre ce que vous voulez :

$("body").on("click", ".close", function(e) {
  $(this).closest('.card').remove();
});

Remarque : N'oubliez pas qu'il ne faut utiliser qu'un seul identifiant sur une seule page, et qu'il faut plutôt utiliser des classes pour que cela fonctionne.

Voir ceci CodePen

// jQuery on() method description
.on( events [, selector ] [, data ], handler )

En savoir plus sur les fonctionnalités de jQuery on() méthode.

J'espère que cela vous aidera !

Answer 4

Tout d'abord, vous devez remplacer id par class.

Et voici la solution :

codepen.io/ivanchuda/pen/xRjyJp

Answer 5

Tout d'abord, je changerais l'ID des divs en class puisque vous générez plusieurs cartes. Les identifiants doivent être uniques. Ensuite, je modifierais le code pour ajouter une ligne supplémentaire à votre espace de fermeture :

<span class="close" onclick="$(this).parent().parent().remove()"></span>