Suppression d'éléments de liste avec Greasemonkey

Question

Un blog que j'ai lu contient des commentaires gênants. Je pensais essayer ma main chez Greasemonkey pour les éteindre.

La structure de base du HTML est simple - un commentaire ressemble à ceci:

<li> 
    <cite>user name ...</cite> 
    comment text 
</li> 

Donc, avec cela à l'esprit, je me suis cogné la tête contre le clavier pendant un certain temps jusqu'à ce abandonné:

var killlist = /user1|user2/; 

var comments = document.getElementsByTagName('li'); 

if (comments.length) { 
    for (var i = 0; i < comments.length; i ++) { 
    var comment = comments[i]; 
    var cites = comment.getElementsByTagName('cite'); 
    if (cites.length) { 
     var cite = cites[0]; 
     var title = cite.textContent; 
     if (killlist.test(title)) { 
     comment.parentNode.removeChild(comment); 
     } 
    } 
    } 
} 

window.alert('Done!') 

(le window.alert est juste pour savoir si le script est exécuté à la fin)

Ce la plupart du temps fonctionne. par exemple. sur une page de test, il a supprimé 13 des 16 messages de l'un des utilisateurs. J'ai essayé de remplacer la ligne de removeChild avec ceci:

comment.style.visibility = 'hidden'; 

Cela semble avoir tout, mais au détriment de laisser de grands espaces vides où les commentaires auraient été.

Je suis un débutant javascript complet, donc quelqu'un peut-il voir quelque chose d'évident que je fais mal?

Answer 1

Vous devriez être en mesure de le corriger en inversant l'ordre de votre boucle et de supprimer des éléments de la fin du tableau des commentaires d'abord:

for (var i = comments.length - 1; i >= 0; i--) 

Answer 2

Le comportement que vous voyez est dû à comments être un live NodeList. Lorsque vous supprimez des éléments référencés par comments à partir du DOM, comments est muté (et son length mis à jour) et votre boucle sort de la fenêtre.

Vous pouvez faire une boucle dans l'ordre inverse comme @Pat suggéré, ou « décrochez » le NodeList du DOM avec une opération de copie premier:

var comments = Array.slice(document.getElementsByTagName('li')); 

Procédez ensuite comme avant.