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

Essayez comme ceci

See the updated codeopen

Modifier le id a class .et correspondre à parent() of parent() on() plus important

$(document).on("click",".close",function() {
        $(this).parent().parent().remove()

        });

Answer 2

La réponse, courte et peu élégante, est la suivante :

$("#content").on("click", "span[id=close]", function() {
    $(this).closest("div[id=card]").remove();
});

Cela devrait fonctionner, mais vous devez faire mieux que cela. Votre code HTML n'est pas valide, car id est censé être unique et vous utilisez le même id pour différents éléments. Vous pouvez utiliser class es à la place, ou s'assurer que l'identifiant est unique. Notez que votre référencement s'améliorera instantanément si vous rendez votre code HTML valide. Si vous utilisez class es au lieu de not-unique id le script ci-dessus sera remplacé par celui-ci :

//content is unique, therefore it can remain an id
$("#content").on("click", "span.close", function() {
    $(this).closest("div.card").remove();
});