supprimer un append avec clic

Je le code suivant: Html:supprimer un append avec clic

<body> 
     <div> 
     <p class='Go'> 
      Create 
     </p> 
     <p class='Del'> 
     Remove 
     </p> 
     </div> 
    </body>

CSS:

.Go{ 
    background-color: lime; 
    width:45px; 
    text-align: center; 
} 
.bad{ 
    background-color:Red; 
    width: 45px; 
    text-align:center; 
} 
.Del{ 
    background-color:pink; 
    width: 55px; 
}

Javascript (Jquery)

$(document).ready(function(){ 
    $('.Go').click(function(){ 
     $('div').append("<p class='bad'>Delete</p>"); 
    }); 
    $('.bad').click(function(){ 
     $(this).remove(); 
    }); 
    $('.Del').click(function(){ 
     $('.bad').remove(); 
    }) 
});

L'idée était que chaque fois J'ai cliqué sur le "créer", il faudrait ajouter un nouveau "supprimer". Chaque fois que je cliquais sur "supprimer", tous les "supprimer" disparaissaient, et chaque fois que je cliquais sur un "supprimer", cette suppression unique serait supprimée.

Tous sauf le dernier fonctionne. Des idées quelle erreur je fais ici?

Source

2017-08-22 Lucian cahil

c'est parce que les éléments 'delete' sont ajoutés après la page est chargée, mais la' .click' est lié à rien car il n'y a pas 'bad' divs lorsque la page est chargée. – tima

que faire si vous définissez la partie que vous souhaitez supprimer dans un div. donc si vous cliquez sur le supprimer tout à l'intérieur de la div sera supprimé. –

Dans cette situation, vous ne pouvez pas lier le clic jQuery à un élément qui n'existe pas encore. Vous liez uniquement le clic sur $ (document) .ready(). Le moyen de contourner cela est de lier la suppression que vous voulez à un élément qui existe lors de la fonction document prêt.

$('body').on('click', '.bad', function(){ 
    $(this).remove() 
})

Ceci indique, chaque fois que le corps est cliqué, si cette cible d'événement a une classe de .bad, puis supprimez-la. De cette façon, l'événement jQuery est lié correctement.

Exemple de travail ici: https://jsfiddle.net/xexhdfzw/1/

Source

2017-08-22 02:17:18 Beaut

supprimer un append avec clic

Répondre

Questions connexes