Comment sélectionner du HTML avec jQuery quand il n'a pas d'attributs d'identification uniques mais qu'il a un commentaire HTML ?

Question

J'écris un script personnalisé pour un forum que je visite fréquemment. Il est conçu pour supprimer les signatures du tableau lorsque je le consulte parce qu'elles sont distrayantes et ennuyeuses et qu'il n'y a aucun moyen de les désactiver dans les options.

Quoi qu'il en soit, je peux exécuter des scripts personnalisés en utilisant une extension Chrome utile. Je suis capable de modifier n'importe quelle partie de la page où les nœuds HTML ont des classes, des ID, ou même des attributs avec un peu d'informations uniques, mais je n'arrive pas à comprendre comment sélectionner et supprimer le HTML suivant avec jQuery.

    <tr>
      <td colspan="2">
        <!--Signature-->
            <div class="resultText">
                <!-- sig -->
                    <div>Signature text</div>
                <!-- / sig -->

            </div>
      </td>
    </tr>

S'il y avait un moyen de récupérer le parent de <!--Signature--> ce serait parfait, mais je ne suis pas sûr que ce soit possible.

Il y a une classe resultText mais cette classe est utilisée partout où il y a du texte saisi par l'utilisateur, pas seulement dans la signature. Je ne peux donc pas m'y accrocher.

Answer 1

Même si le resultText est utilisée ailleurs, je recommande tout de même d'utiliser un sélecteur de classe comme point de départ, sinon vous devrez chercher les nœuds de commentaires dans tout le document.

A partir des éléments appariés, vous pouvez obtenir les noms de leurs parents. contenu() utiliser filtrer() pour isoler les noeuds de commentaires (leurs nodeType est égal à 8 ) et de comparer la valeur de ces nœuds à votre Signature chaîne :

$(".resultText").parent().each(function() {
    var $this = $(this);
    var signature = $this.contents().filter(function() {
        return this.nodeType == 8 && this.nodeValue == "Signature";
    });
    if (signature.length) {
        // Signature found, $this is the <td> element.
        $this.closest("tr").remove();  // For example.
    }
});

Answer 2

Vous pouvez utiliser .contents() pour obtenir tous les noeuds enfants d'un élément : http://api.jquery.com/contents

Dans la documentation :

Obtenir les enfants de chaque élément dans l'ensemble des éléments appariés, y compris les nœuds de texte et de commentaire.

$('tr').each(function (index, obj) {
    $(this).children('td').contents();//this selects all the nodes in each TD element in the table, including comment nodes
});

Voici une démo : http://jsfiddle.net/NLhz9/1/

Answer 3

Puisque le script est fondamentalement juste pour vous, utilisez xpath pour trouver les commentaires.

Essayez quelque chose comme ça :

var comment, comments = document.evaluate('//comment()', document);
while ((comment=comments.iterateNext())) {
  if (comment.data=='Signature') { // found one
    comment.parentNode.parentNode.removeChild(comment.parentNode);
  }
}