Suppression d'une balise et de son contenu

Version imprimable

Bonjour,

J'ai des difficultés à supprimer une balise dans une page html. Voici l'extrait html :

Code:

1
2
3
4
5
6
<div id="initialmsgs">
<div class="confirm">Soumission :  paper #37.  Vous recevrez un courriel losque les évaluations seront prêtes.  Les mises à jours sont acceptées jusqu'au : Tuesday 20 Aug 2013 9:59:59am CEST<span class='usertime' id='usertime1' style='display:none'></span>.<br><em>Database error</em> ce type d'erreur est à ignorer, merci de ne pas en tenir compte. Seule compte votre confirmation envoyée par courriel.</div>
<div class="merror"><p>Database error while performing search (create temporary table PaperMatches_0 select Paper.paperId paperId from Paper where true group by Paper.paperId): Access denied for user 'aref2013'@'' to database 'aref2013'</p></div>
<div class="merror"><p>Database error while performing search (create temporary table PaperMatches_1 select Paper.paperId paperId from Paper where true group by Paper.paperId): Access denied for user 'aref2013'@'' to database 'aref2013'</p></div>
</div>
</div>

Ce que je veux, c'est supprimer la ligne de la classe merror en raison du contenu (et non pas n'importe quelle classe merror). Voici mon essai :

Code:

1
2
3
4
5
6
7
e="<div class=\"merror\"><p>Database error while performing search \\(create temporary table PaperMatches_1 select Paper.paperId paperId from Paper where true group by Paper.paperId\\): Access denied for user \\'aref2013\\'@\\'\\' to database \\'aref2013\\'</p></div>";
doc=document.body.innerHTML;
while ( doc.match(e) != '') {
    document.body.innerHTML=document.body.innerHTML.replace(/<div class=\\"merror\\"><p>Database error while performing search \\(create temporary table PaperMatches_1 select Paper.paperId paperId from Paper where true group by Paper.paperId\\): Access denied for user 'aref2013'@'' to database 'aref2013'<\\/p><\\/div>/,'');
 
}
alert(doc.match(e));

Le script échoue (erreur d'expression régulière), en effet je ne suis pas sûr de la syntaxe ???

Merci de l'aide,
Thibaud.

04/01/2013, 10h05
javatwister
salut

mettons que ton extrait html soit fixe, choppe le div que tu veux supprimer par l'arbre dom:
Code:

1 2 var d=document.getElementById("initialmsgs"); d.removeChild(d.getElementsBytagName("div")[2]);

Bonne idée, mais mon html n'est pas fixe... voici un exemple de balise semblable que je ne veux pas enlever :
Code:

1 2 3 <div id="initialmsgs"> <div class="merror">Before submitting your paper, you must enter values for the Title, Authors, and Abstract fields. Fix the highlighted fields and try again.</div> </div>

04/01/2013, 14h52
javatwister

alors il va falloir exposer ton problème de manière plus précise... désolé, pour l'instant;

Désolé si je n'ai pas été assez clair. Voici un exemple ci-dessous. J'ai trois messages dans des boîtes appartenant à la même classe merror, mais je ne veux supprimer que le message de type database (il peut y en avoir plusieurs). Si je supprime la classe je supprime aussi le message utile, et si je supprime le message je conserve une boîte css vide : il me faut donc supprimer la ligne complète avec un innerHTML dans une boucle while jusqu'à ce que les messages indésirables n'apparaissent plus. Je fais un test avec match et je supprime la ligne avec replace. Cependant ma syntaxe n'est pas bonne (regexp), je ne parviens pas à supprimer la ligne en question. Voici la ligne à supprimer :

Code:

<div class="merror"><p>Database error while performing search (create temporary table PaperMatches_0 select Paper.paperId paperId from Paper where true group by Paper.paperId): Access denied for user 'aref2013'@'' to database 'aref2013'</p></div>

Et voici mon exemple :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 <html> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <title>Test</title> <style> .merror{ width:800px; margin:auto; padding:10px; background-color:#FFFF00; border-left:1px solid #000000; border-right:1px solid #000000; border-bottom:1px solid #000000; border-top:1px solid #000000; } </style> </head> <body>  <SCRIPT language="Javascript"> e="<div class=\"merror\"><p>Database error while performing search \\(create temporary table PaperMatches_1 select Paper.paperId paperId from Paper where true group by Paper.paperId\\): Access denied for user \\'aref2013\\'@\\'\\' to database \\'aref2013\\'</p></div>"; doc=document.body.innerHTML; while ( doc.match(e) != '') { document.body.innerHTML=document.body.innerHTML.replace(/<div class=\\"merror\\"><p>Database error while performing search \\(create temporary table PaperMatches_1 select Paper.paperId paperId from Paper where true group by Paper.paperId\\): Access denied for user 'aref2013'@'' to database 'aref2013'<\\/p><\\/div>/,''); } alert(doc.match(e)); </SCRIPT> <div id="initialmsgs"> <div class="merror">It looks like you tried to upload a gigantic file, larger than I can accept. Any changes were lost.</div> <div class="merror"><p>Database error while performing search (create temporary table PaperMatches_0 select Paper.paperId paperId from Paper where true group by Paper.paperId): Access denied for user 'aref2013'@'' to database 'aref2013'</p></div> <div class="merror"><p>Database error while performing search (create temporary table PaperMatches_0 select Paper.paperId paperId from Paper where true group by Paper.paperId): Access denied for user 'aref2013'@'' to database 'aref2013'</p></div> </div> </div> </body> </html>
Est-ce que c'est plus clair ainsi ?
Merci à toi

04/01/2013, 19h38
thibaud74

Cette syntaxe semble être la bonne :

Code:

document.body.innerHTML=document.body.innerHTML.replace('<div class=\"merror\"><p>Database error while performing search (create temporary table PaperMatches_0 select Paper.paperId paperId from Paper where true group by Paper.paperId): Access denied for user \'aref2013\'@\'\' to database \'aref2013\'</p></div>','');
05/01/2013, 13h29
sekaijin
mais que vous pouvez êtres compliqué

on a inventé le DOM c'est pour l'utiliser
Code:

1 2 3 4 5 for (div in document.getElementByTagName('DIV')) { if (div.className == 'merror') { div. parentNode.removeChild(div); } }
c'est beaucoup moins compliqué que de recréer complètement la page
car paser innerHTML ça revient à ça

lecture du code HTML
interprétation des tags sources
implémentation du DOM
extraction d'un nouveau code html (ce n'est pas le code source)
application de la regexp et suppréssion de texte dans le code
lecture du nouveau code source
interprétation du nouveau code source
suppression de tous les éléments du DOM
implémentation du nouveau DOM

alors qu'avec la méthode qui utilise le dom on a
lecture du code HTML
interprétation des tags sources
implémentation du DOM
supression des élements du dom qui sont des div avec la classe merror et leur enfants

A+JYT
14/01/2013, 17h25
thibaud74

Effectiement sekaijin, votre méthode est beaucoup plus propre. Cependant je ne veux pas supprimer toutes les balises div "merror" mais uniquement celles qui contiennent un certain texte à afficher, ce qui fait que je suis obligé de faire un test sur le contenu, d'où le innerHTML.

Cependant, mon code entraîne une "Erreur sur la page" dans Internet Explorer 8 (MSIE 9 OK), j'obtiens ce message d'erreur :

Citation:

html parsing error unable to modify the parent container element before the child element is closed

Avec un document.body.onload = function() {} , je parviens à éviter le problème dans MSIE 8. Désavantage : le message tant honni ;-) apparaît une seconde dans les navigateurs, et ne disparaît pas dans MSIE 8 ???
15/01/2013, 11h26
sekaijin

cela signifie que le code html produit est faux

A+JYT
15/01/2013, 12h39
thibaud74

Bien sûr, mais pourquoi ne fonctionne-t-il pas sous MSIE 8 alors qu'il fonctionne sur MSIE 9 et à peu près tous les autres navigateurs ?
15/01/2013, 13h37
SpaceFrog

IE9 => HTML5 les balises n'ont plus besoin d'être fermées ?