Suppression multiple ne marche pas

Par Ekim Kael, il y a 9 ans

Javascript

Bonjour,

mon HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Manage Players</title> <!-- Bootstrap --> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> <style> .users{ display: flex; flex-direction: row; align-content: space-between; } .users img{ margin: 0 5px; } </style> </head> <body> <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8 col-lg-offset-2"> <div class="panel panel-default"> <div class="panel-heading"> <h2 class="center">Convocations U11 3</h2> </div> <div class="panel-body"> <table class="table table-striped"> <thead> <tr> <th>Joueurs</th> <th>Date</th> <th>Validation</th> </tr> </thead> <tbody> <tr> <th> <div class="users"> <img class="img-circle" src="http://placehold.it/50x50" alt=""> <h4>Nouchi35</h4> </div> </th> <th> 10/09/2016</th> <th> <button type="button" class="btn btn-success" >Présent <span class="glyphicon glyphicon-ok"></span></button> <button type="button" class="btn btn-success" ><span class="caret"></span></button> </th> </tr> <tr> <th> <div class="users"> <img class="img-circle" src="http://placehold.it/50x50" alt=""> <h4>James R.</h4> </div> </th> <th> 10/09/2016</th> <th> <a href="#" class="btn btn-danger remove">Absent <span class="glyphicon glyphicon-remove"></span></a> </th> </tr> <tr> <th> <div class="users"> <img class="img-circle" src="http://placehold.it/50x50" alt=""> <h4>James R.</h4> </div> </th> <th> 10/09/2016</th> <th> <a href="#" class="btn btn-danger remove">Absent <span class="glyphicon glyphicon-remove"></span></a> </th> </tr> <tr> <th> <div class="users"> <img class="img-circle" src="http://placehold.it/50x50" alt=""> <h4>Leonel M.</h4> </div> </th> <th> 10/09/2016</th> <th> <div class="btn-group btn-group-sm" role="group" aria-label="Small button group"> <button type="button" class="btn btn-danger">Absent</button> <button type="button" class="btn btn-success">Présent</button> </div> </th> </tr> <tr> <th> <div class="users"> <img class="img-circle" src="http://placehold.it/50x50" alt=""> <h4>Cristiano R.</h4> </div> </th> <th> 10/09/2016</th> <th> <div class="btn-group btn-group-sm" role="group" aria-label="Small button group"> <button type="button" class="btn btn-danger">Absent</button> <button type="button" class="btn btn-success">Présent</button> </div> </th> </tr> <tr> <th> <div class="users"> <img class="img-circle" src="http://placehold.it/50x50" alt=""> <h4>Neymar J.</h4> </div> </th> <th> 10/09/2016</th> <th> <div class="btn-group btn-group-sm" role="group" aria-label="Small button group"> <button type="button" class="btn btn-danger">Absent</button> <button type="button" class="btn btn-success">Présent</button> </div> </th> </tr> </tbody> </table> </div> </div> </div> <script src="jquery/jquery.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> </body> </html>

mon JS

<script> var remove = document.querySelectorAll('.remove') for(var i = 0; i < remove.length; i++){ var del = remove[i] var classe = del.classList del.addEventListener('click', function(e){ e.preventDefault classe.remove('btn-danger','remove') del.innerHTML = 'Présent <span class="glyphicon glyphicon-ok"></span>' classe.add('btn-success','present') }) } </script>

je voudrais que chaque fois que je clique sur un bouton "absent" il passe au à "présent"
pour le moment ça ne fonctionne que sur un seul
peu importe lequel tu appuis ça change juste le 2ème
je voudrais que ça change celui qui est appuyer

Merci d'avance

1 réponse