当没有唯一标识属性但有 HTML 注释时，如何使用 jQuery 选择 HTML？

Question

我正在为我经常访问的论坛编写自定义脚本。它的设计目的是当我查看板上的签名时将其从板上删除，因为它们会分散注意力并且令人厌烦，并且无法在选项中禁用它们。

无论如何，我可以使用有用的 Chrome 扩展程序运行自定义脚本。我能够修改页面的任何部分，其中 HTML 节点具有类、ID，甚至具有一些唯一信息的属性，但我似乎无法弄清楚如何使用 jQuery 选择和删除以下 HTML。

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

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

如果有一种方法可以获取 的父级，那将是完美的，但我不确定这是否可能。

有一个 resultText 类，但该类在用户输入文本的任何地方使用，而不仅仅是在签名中。所以我无法抓住这一点。

Answer 1

即使 resultText 类在其他地方使用，我仍然建议使用类选择器作为起点，否则您将在整个文档中查找注释节点。

从匹配的元素中，您可以获取其父级的 contents()，使用 filter() 来隔离注释节点（它们的 nodeType 属性是相等的到 8）并将这些节点的值与您的值进行比较签名字符串：

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

您可以使用 .contents() 获取元素的所有子节点： http:// /api.jquery.com/contents

来自文档：

获取匹配元素集中每个元素的子元素，
包括文本和注释节点。

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

这是一个演示： http://jsfiddle.net/NLhz9/1/

Answer 3

由于该脚本基本上只适合您，因此请使用 xpath 查找注释。

尝试这样的事情：

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