Aide concernant style.backgroundColor en javascript

Bonjour a tous

Je continue à jouer avec mon bon de commande et je souhaiterais lui ajouter une fonctionnalité afin de pouvoir retirer l'article du panier par une croix.
Voici ce qui se passe actuellement
Lorsque j'ajoute un article à mon panier un cadre vert en background-color vert vient entourer l'article pour prévenir l'utilisateur que l'article est dans le panier
Cela est ok.

Ma nouvelle modification de code
J'ai réussi lorsque l'utilisateur ajoute un article, qu'une croix s'affiche pour retirer cet article du panier.
Lorsque je clic sur la croix l'article est bien retirer du panier et la croix disparaît
Mais je bloque sur le background-color vert
Car lorsque je supprime mon article ,ce background-color vert se retire de tous mes articles qui ont été ajoutés au panier
Peut-être avez-vous une solution ?


Voici mon code html pour un article.

<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 couleur1" style="margin-bottom: 15px; padding-left: 5px; padding-right: 5px;">
                 <div class="card">
                   <div class="">
                     <h3 class="card-title centrer_titre_texte couleur2">2001</h3>
                     <div class="card-body stylecardbody" style="padding-top: 0;">
                       <div class="row mt-12">
					   
					    <!-- afficher image agrandie -->
                         <div class="popupgallery">
                           <div class="position-relative product">
                             <a class="example-image-link" href="https://phil.pecheperle.be/image-perles/perle-verre-peche-gardon-2001.JPG" data-lightbox="example2mm" data-title="Cliquez n'importe où en dehors de l'image ou le X à droite pour fermer.">
                               <div class="overlay w-100 h-100 position-absolute justify-content-center">
                                 <span class="align-self-center" style="text-align: center;">clic pour agrandir</span></div> <img class="example-image b-items__item__img" src="https://phil.pecheperle.be/image-perles/perle-verre-peche-gardon-2001-grande_redimensionnee.JPG" alt="" width="100%" height="143.5px" />
                             </a>
                           </div>
                         </div>
						 
                         <div class="col-md-12 " style="margin-top: 15px; ">
                           <p class="card-text centrer_titre_texte">Perle de 2 mm</p>
                           <div class="centrer_titre_texte">
                             <p>3 perles identiques</p>
                             <p>1,10 euros</p>
                           </div>
                           <button type="button" class="articleBtndecription styledescription" onclick="ouvreMaJolieAlertdescription(event,'Diametre +- 2.5 mm<br>de couleur blanche <br>avec 2 germes rouges  ');">Description</button>
                         </div>
						 
                         <div class="col-md-12">
                           <select class="form-select styleselect" aria-label="2001" onchange="changeQte(this);">
                               <option style="color:red" selected value="0">Retirer</option>
                             <option selected value="1">1 sachet </option>
                             <option value="2">2 sachets</option>
                             <option value="3">3 sachets </option>
                             <option value="4">4 sachets </option>
                             <option value="5">5 sachets </option>
                           </select>
                         </div>
						 
						  <!-- bouton pour ajouter dans la panier et ou je fais apsser plusieurs data pour le code jquery -->
                         <a style="cursor: pointer; margin-bottom: 5px;width: 90%;display: block;margin-left: auto;margin-right: auto;" data-nom="2001" data-prix="1.10" data-qte="1" data-checkbox="2001" data-url="https://phil.pecheperle.be/image-perles/perle-verre-peche-gardon-2001.JPG" class="btn btn-primary ajouter-panier b-items__item__add-to-cart" onclick="setTimeout(() => ouvreMaJolieAlert(event), 1000);">
                           ajouter au panier
                         </a>
						 
						  <!-- croix qui apparait ou disparait suiavant si article dans le panier  -->
                         <div class="show-panier" id="test"></div>
						 
                         <div class="row mt-2" style="display: block;margin-left: auto;margin-right: auto;">
                           <div class="form-check ">
                             <input class="form-check-input 2001" type="checkbox" data-nom="Option 1" data-prix="-0.55" id="case_01" style="visibility: hidden;" checked="checked" />
                             <label class="form-check-label stylelabel stylelabel" for="case_01" style="text-align: center;"> remise de-50% </label>
                             <button type="button" style="display: block; margin-left: auto; margin-right: auto; font-size: 18px;" class="articleBtnnonreguliere" onclick="ouvreMaJolieAlertnonreguliere(event,'');">Détail remise</button>
                           </div>
                         </div>
						 
                       </div>
                       <div class="col-md-12 text-end"></div>
                     </div>
                   </div>
                 </div>
               </div>

ensuite vient l'objet pour supprimer un article et qui devrait retir la couleur de fond vert de l'article que je retire et seulement de celui la

  //objet pour tout enelever une reference
  obj.enlever_produit_de_panier_tous = function(nom) {
    for (var item in panier) {
      if (panier[item].nom === nom) {
        panier.splice(item, 1);
        
        // couleur1 est pour l'article complet
        //couleur2 juste pour le titre
        //couleur3 va servir pour les packs
        const boxes2 = document.querySelectorAll('.couleur2');
        boxes2.forEach(couleur2 => {
          couleur2.style.backgroundColor = '';
        });
        const boxes = document.querySelectorAll('.couleur1');
        boxes.forEach(couleur1 => {
          couleur1.style.backgroundColor = '';
        });
        /*const boxes3 = document.querySelectorAll('.couleur3');
        boxes3.forEach(couleur3 => {
          couleur3.style.backgroundColor = '';
        });*/
        break;
      }
    }
    savepanier();
  }

ensuite vient l'action du click

$('.show-panier').on("click", ".effacer-item-cadre", function(event) {
  var nom = $(this).data('nom')
  MonPanier.enlever_produit_de_panier_tous(nom);
  afficherpanier();
})

pour finir l'id test qui va venir afficher la croix pour supprimer l'article du panier 

         var panierArray = MonPanier.listpanier();
         for (var i in panierArray) {
           document.getElementById('test').innerHTML = "<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'><button class='btn btn-danger mt-3 effacer-item-cadre' data-nom='" + panierArray[i].nom + "'>X</button></div>"
         }

Ma question est de savoir comment je pourrais retirer la couleur de fond que de l'objet supprimer sans pour cela l'enlever de tous les articles