Discussion :

[thibaud74]

Bonjour,

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[javatwister]

salut

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[thibaud74]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[javatwister]

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

[thibaud74]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>
 
<!-- Suprression des messages Database, pas l'autre -->
<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

[thibaud74]

Cette syntaxe semble être la bonne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[sekaijin]

mais que vous pouvez êtres compliqué

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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 :

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 ???

[sekaijin]

cela signifie que le code html produit est faux

A+JYT

[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 ?

[SpaceFrog]

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