Comment effacer le contenu et le remplacer par un autre Fermé

Question

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('

Parcourir'); 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('

Veillez upload au format pdf, jpg, jpeg, png

Parcourir

Document obligatoire

Veuillez saisir le document que vous souhaitez ajouter.

'); $(".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('

Parcourir'); 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

R0b0x · Answer

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/

Dz · Answer

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.

Comment effacer le contenu et le remplacer par un autre

2 réponses

Discussions similaires