Comment effacer le contenu et le remplacer par un autre

Signaler
-
 R0b0x -
Bonjour,

Je souhaiterai effacer le contenu lorsqu'on appuie sur la classe "test2" et remettre la classe "uploadDoc". J'arrive a remettre la classe mais en revanche pour ce qui est de supprimer le contenu et non toute la ligne je n'y parvient pas.

Voici le code qui me permet de supprimer normalement le contenu :

$(document).on("click", "a.test2", function (){
        $(".upl").eq(9).remove();
        $(".icon2").eq(9).remove();
        $(".fileUpload").eq(9).append('<img src="https://image.flaticon.com/icons/svg/136/136549.svg" class="icon2"><span class="upl" id="upload">Parcourir</span><input type="file" class="upload up" name="upload1" accept="image/png, image/jpeg, .pdf" id="up" onchange="readURL(this);" />');
        document.getElementById('change').classList.toggle('uploadDoc');
    });


J'ai en tout 8 lignes qui sont affichées côté html et la ligne que je rajoute côté js est celle-ci, la 9ème. Je ne sais pas si c'est un soucis au niveau du chiffre avec "eq(9)" car le fait de remettre la classe "uploadDoc" fonctionne.

La ligne sur laquelle je travaille la voici après quelques modifications :

$(".btn-new").on('click', function (){
        $("#uploader2").append('<div class="row uploadDoc" id="change"><div class="col-sm-4 order-1 order-sm-0"><div class="docErr">Veillez upload au format pdf, jpg, jpeg, png</div><!--error--><div class="fileUpload btn btn-orange"> <img src="https://image.flaticon.com/icons/svg/136/136549.svg" class="icon2"><span class="upl" id="upload">Parcourir</span><input type="file" name="file[]" class="upload up" accept="image/png, image/jpeg, .pdf" id="up" onchange="readURL(this);" onclick="changeClass();" required/><div class="invalid-feedback">Document obligatoire</div></div></div><div class="col-sm-1 order-2 order-sm-1"><div class="pos_croix"><a href="#" class="test2"><i class="fas fa-times fa-xs" style="color:red;"></i></a></div></div><div class="col-sm-6 order-0 order-sm-2"><input type="text" class="form-control" name="test[]" placeholder="Veuillez preciser le document que vous ajoutez" required pattern="^[A-Za-z -]+$"><div class="invalid-feedback">Veuillez saisir le document que vous souhaitez ajouter.</div></div></div>');

        $(".upload up").on('click', function changeClass(){
            $('#change').toggleClass('uploadDoc');
        });

        $(document).on("click", "a.test2", function (){
            $(this).closest(".uploadDoc").remove();
        });

    });


J'ai cherché un autre moyen pour effacer le contenu et le remplacer par l'affichage initial avant que l'action ne soit faite voici une 2ème version :
 $(document).on("click", "a.test2", function (){
        
        const parent = $(this).closest('.row');
        const parent2 = $(this).closest('.fileUpload');
        parent.find('.upl').remove();
        parent.find('.icon2').attr('src', 'https://image.flaticon.com/icons/svg/136/136549.svg');
        // parent.find('.upl').attr('Parcourir');

        // parent2.append('<img src="https://image.flaticon.com/icons/svg/136/136549.svg" class="icon2"><span class="upl" id="upload">Parcourir</span><input type="file" name="file[]" class="upload up" accept="image/png, image/jpeg, .pdf" id="up" onchange="readURL(this);" onclick="changeClass();" required />');

      document.getElementById('change').classList.toggle('uploadDoc');
    });


J'arrive à faire certain truc mais je n'arrive pas à afficher "Parcourir"...

J'espère avoir était clair dans mes explications

2 réponses

Salut,
en pur JavaScript vous passez par className et vous remplacez la chaîne de caractère par la nouvelle.
classList est la même chose(moins tolérée il me semble) et renvoi donc une chaîne de caractères(la liste des classes d'un élément séparée par un espace, exactement comme elle est écrite dans l'attribut HTML "class" d'un élément).

https://developer.mozilla.org/fr/docs/Web/API/Element/classList
https://developer.mozilla.org/fr/docs/Web/API/Element/className

Là vous utilisez la méthode JQuery.toggle qui agit sur un élément(HTML) sur une chaîne de caractère.

https://api.jquery.com/toggle/
indique:
$( ".target" ).toggle();


Vous comprenez la différence entre un objet JQuery et une chaîne de caractères?

Donc il faut faire autrement et traiter le texte en texte.
Curieux d'ailleurs que vous n'ayez pas une erreur.

Ou alors utilisez la méthode appropriée, ce que vous avez fait d'ailleurs dans votre code en utilisant .toggleClass

https://api.jquery.com/toggleClass/
Merci beaucoup pour ta réponse.
J'ai essayé de tenir compte de tes explications mais pour le coup je n'ai pas réussi à le faire fonctionner... J'ai l'impression que c'est plus cette ligne :
$(".upload up").on('click', function changeClass(){
            $('#change').toggleClass('uploadDoc');
        });


qui me pose problème que le reste...
J'ai l'impression que la fonction ne s'exécute à aucun moment.
votre sélecteur étant faut il y a des chances ;)
$(".upload up")


Indique en passant par un "objet" JQuery indiqué par $ d'utiliser la classe .upload up.
Hors un nom de classe ne peut pas comporter d'espace et la classe CSS ".upload up" ne peut exister qu'en tant qu'erreur, donc ne donnera JAMAIS un résultat.
Si vous voulez sélectionner plusieurs classes il me semble(je ne suis pas expert en JQuery) qu'il y à une autre syntaxe à utiliser:

https://w3tutoriels.com/jquery/jquery-selecteurs/

https://duckduckgo.com/?q=s%C3%A9lectionner+plusieurs+%C3%A9l%C3%A9ments+en+JQuery

Ou même passer par le sélecteur CSS correct, ici tous ceux possible et ce qu'ils indiquent:

https://www.w3schools.com/cssref/css_selectors.asp

En clair soit
$(".upload .up") 
si c'est ça que vous voulez(voir explications du sélecteur CSS) ou pour les éléments d'une seule classe
$(".upload-up")

en utilisant la norme classique CSS ou n'importe laquelle qui est juste(donc sans espace dans un nom de classe qui sert à séparer 2 classes différentes pour un élément).

En espérant j'ai bien compris le problème. JQuery je connait un peu mais fait plus de pur JS ^parce que c'est pas toujours un avantage (JQuery) et que ça permet de mieux comprendre le raisonnement derrière(celui du créateur du programme comme celui de la logique du langage), ça revient simplement à créer ses propres fonctions plutôt qu'utiliser celles de JQuery bien pratiques toutefois par qu'elles pas mal de trucs sans avoir à les développer.
ça dépends des corconstances et des objectifs donc.
JQuery me satisfait pas surtout parce que dans pas mal de cas il va rajouter de la lenteur d''exécution surtout pour des tâches simples et/ou répétitives comme à travers une boucle destinée à l'animation graphique.

Indéniablement c'est un très bon outil JQuery et son succès pas démérité mais c'est le choix de son emploi ou pas que je critique dans certains cas ou écrire soit même quelques fonctions suffit plutôt que faire appel à une usine à gaz(même mimifié parce que n'importe quel fichier peut être mimifié de la même manière et plus il sera léger moins la mimification devient nécessaire).