javascript - 当关键字包含在特定的 td 中时如何删除整个 tr

Question

里面有几个<tr>在我的文档中有 7 个类，每个类有时都有一个相应的类名(即 sub、id、assigned、sub、sub、status 和一个无类的“td”)。在 td class = "status"中有一个 span 类定义为 <span class = "statusBox">Passed</span>或者 <span class = "statusBox">Failed</span>.

如果 span 类中包含的文本是“Passed”，我需要删除整个 <tr> .如果失败，它将保留在文档中。我怎样才能做到这一点？

我的第一次尝试是通过这样的电话:

function() {
    if ($('tr td span.statusBox').html() == "Passed"){
    $('tr td span.statusBox').hide();  
}

但这只删除了短语“Passed”的每个实例，而不是整个 <tr> .

我也试过 $("tr td span.statusBox:contains('Passed')").each(function(){
$(this).css("visibility","hidden");
});

我觉得这更像是一条正确的道路，但我似乎无法让它发挥作用。

Answer 1

你很接近:找到带有“已通过”一词的状态框，然后找到最近的祖先 tr 元素并将其从 DOM 中删除:

$("tr td span.statusBox").filter(":contains('Passed')").each(function(){
    $(this).closest('tr').remove();
});

由于 :contains 运算符是一个 jQuery 扩展(它已从 CSS 规范中弃用)，将选择器分成两部分会更快。首先是查找类 statusBox 的所有跨度，这将使用 native 浏览器方法查找元素。然后使用 :contains 运算符过滤这些元素(它可能具有 native 实现或可能在 jQuery 中实现，具体取决于浏览器)。