Vérifier l'existence d'un div existant

Bonjour à tous, voici mon problème ( simplifié ) :
J'ajoute du contenu html en AJAX via un bouton nommé (Continuer) après avoir selectionné une compétence dans mon input comme ceci :

    function nextPart(){
        var mandatoryContent = '';
        var optionalContent = '';
        var starcontent = '';
    
        for (var i = 0; i < mandatorySkills.length; i++) {
            if (mandatorySkills[i].selected){
                var skill = {"skillId": mandatorySkills[i].value, "skillLabel": mandatorySkills[i].textContent};
                console.log('labels de firsTabParam :',`${skill.skillLabel}`);
                mandatoryContent +=  renderTemplate(mandatorySkillTemplate, skill);
            }
        }
        mandatoryContainer = document.getElementById('selectedMandatorySkills');
        mandatoryContainer.insertAdjacentHTML('beforeend', mandatoryContent);

  
        function renderTemplate(template, data) {
            console.log('data',data);
            if(data != null){
                return template(data);
            }
        }

Voici l'HTML généré pour chaque skill selectionné :

const mandatorySkillTemplate = (skill) =>
    `<div id="mandatorycard${skill.skillId}" class="card">
        <div class="card-body align-items-center">
            <span id="skill${skill.skillId}" class="skillfirst"> ${skill.skillLabel}</span>
            <button onclick="deleteSkill(${skill.skillId}, 'mandatorycard')" class="btn btn-danger btn-circle btn-sm" type="button" value="${skill.skillId}" ><i class="fas fa-trash"></i></button>
        </div>
    </div>`;

J'ai un bouton précédent qui me permet de revenir au div précédent, et lorsque je relance ma fonction nextPart() , si je séléctionne une compétence déjà séléctionnée au préalable ( qui est présente dans mon div ) , la fonction renvoie une deuxieme "card" identique.. je me retrouve avec plusieurs div identique, comment puis-je faire pour éviter cela ? Je ne souhaite pas supprimé tout le div quand je clique sur Précédent mais bien conservé les div présentes..
Demandez-moi du code / explications supplémentaire si ce n'est pas assez clair

C'est difficile de suivre ton fonctionnement... En fait si j'ai bien compris, tu as au départ une carte, puis quand tu appuies sur "suivant", tu as deux cartes dans le container, puis trois, puis quatre, etc...

Et quand tu appuies sur "précédent", tu souhaites faire en dégressif, trois cartes, puis deux, etc. ?

Si c'est ça il va falloir que tu revois la philosophie de ton code.

Dans ton cas tu peux éventuellement faire une variable à la racine de ton script qui se nomme currentPosition et commence à zéro.
Ensuite à chaque fois que tu appuies sur nextPart() tu incrémentes de 1 ce compteur.
Ensuite quand on clique sur "précédent" (fonction previousPart()) tu peux retirer directement l'élément d'ID "mandatorycard" + currentPosition (en admétant que les ID des skills commencent à 0 et augmentent de 1), dans le cas où on clique sur le bouton précédent. Cela aura en théorie pour effet de retirer le dernier élément sélectionné. Et bien sûr tu décrémentes currentPosition de 1.
Modifié par Nolan (02 May 2019 - 21:58)