Problème Action bouton supp / bouton restaurer

Sesto17
Javascript

Bonjour,
j'ai un petit programme où il y a 2 boutons , un "supprimer" (devant supprimer l'élément séléctionné dans une liste et un "restaurer" devant restaurer le dernier élément supprimé......
J'arrive à sélctionner les éléments de ma liste, mais la suppression et la restauration ne fonctionnent pas :)

voici mon code : ( le html) 


<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">
    <title>exo3.js</title>
</head>
<body>
<div class="container">
  <div class="panel panel-primary">
      <div class="panel-heading">Annuaire Javascript</div>
      <div class="panel-body">
          <p>Plantas sunt contencios de mirabilis hibrida.Nunquam desiderium fortis.
              Plantas sunt contencios de mirabilis hibrida.Nunquam desiderium fortis.
              Plantas sunt contencios de mirabilis hibrida.Nunquam desiderium fortis.
              Plantas sunt contencios de mirabilis hibrida.Nunquam desiderium fortis.
              Plantas sunt contencios de mirabilis hibrida.Nunquam desiderium fortis.
              Plantas sunt contencios de mirabilis hibrida.Nunquam desiderium fortis.
          </p>
      </div>
  </div>

          <ul id="liste" class="list-group">
              <li class="list-group-item">Lanctot  Granville  03.94.49.02.95</li>
              <li class="list-group-item">Arnaud  Cheneye  05.74.47.38.93</li>
              <li class="list-group-item">Daniel  Truchon  04.54.59.99.06</li>
              <li class="list-group-item">Roxanne  Boncoeur  02.37.72.02.96</li>
              <li class="list-group-item">Mallory  Cinqmars  02.07.27.15.51</li>
              <li class="list-group-item">Saber  Boutot 01.50.22.47.39</li>
          </ul>

          <button id="supprimer" class="btn-primary">Supprimer</button>
        <button id="restaurer" class="btn-primary">Restaurer</button>

</div>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="js/exo3.js"></script>
</body>
</html>

et voici le js :

$liste = document.getElementById("liste");
$supprimer = document.getElementById("supprimer");
$restaurer = document.getElementById("restaurer");

function select(e) {
    e.target.classList.toggle("selected");
}

function supprimer() {
    for (i = 0; i < $liste.children.length; i++) {
        if ($liste.children[i].classList.contains("selected")) {
            $liste.children[i].classList.add("poubelle");
        }
    }
}

function restaurer() {
    for (i = 0; i < $liste.children.length; i++) {
        $liste.children[i].classList.remove("poubelle");
    }
}

$liste.onclick = select;
$supprimer.onclick = supprimer;
$restaurer.onclick = restaurer;

si vous avez une idée de ce qui merde ...... ;)

3 réponses

Sesto17
Auteur
Réponse acceptée

hello,
Le problème venait en fait de mon css.....

antho07

Bonjour un diag rapide:

Lorsques tu cliques sur ligne ta classe "selected" se positionne bien
Lorsques tu cliques sur supprimer les classes poubelles s'ajoutent bien aux éléments sélectionnées.
Lorsques tu cliques sur restaurer ces classes poubelles sont bien retirer (les classes selected restent positionnées.)

Quel comportement souhaites-tu ?

Sesto17
Auteur

Bonjour antho07,
en fait je souhaite que l'élément séléctionné disparaisse de ma page en appuyant sur supprimer et soit restauré en appuayant sur restaurer. Donc d'après ce que tu me dit, il s'agirait plus d'un prob html ou css ?