隐藏其中包含短语的所有div

Question

我想隐藏（删除）包含特定字符串的所有<div>。像过滤器一样。可以认为它具有浏览器插件的功能。

基本上是

1. 在div中的标记内，或
2. 立即在div内（但不是标签）

有关如何有效地做到这一点的任何想法？理想情况下，我想让浏览器对此做出很好的反应，不仅要隐藏div，还要以页面没有大空格的方式删除它。

我真的不是非常流利的javascript，所以我想我是否能在这里得到一些指示。 （并且最好直接使用JS或JQuery？）

谢谢！

Answer 1

首先，制定计划：

1. 查找包含该短语的所有节点。 This SO Q will help.
2. 对于您找到的每个节点，向上移动dom树，直到找到要删除的第一个封闭div。请参阅JQuery dom transversal helpers
3. 然后删除相应的div。你可能想要为它们的删除设置动画，也可以使用jquery。

Re：使用jquery？由你决定。如果您希望代码在多个浏览器上运行，那么jquery会有所帮助。无论有没有jquery，你的问题都可以解决。

祝你好运。

Answer 2

从这个答案中隐藏起来：Get all visible DIVs on a page with javascript?

这对jQuery来说相当简单，但你请求非jquery所以我会快速给它：

function removeDivs(withString) {
    var divs = document.getElementsByTagName("DIV");
    for(var i = 0; i < divs.length; i++) {
        div = divs[i];
        if (div.style.display != "none" && div.innerHTML.indexOf(withString) > -1) {
            div.style.display = "none";
        }
    }
}

我会注意到你说的是“里面的短语”，但没有指明你想知道短语在里面的等级。在嵌套div的情况下，这将隐藏所有div，因为它可以在其innerHTML中具有短语。换句话说，由于innerHTML包含所有包含的div，因此任何包含div的div都会被隐藏，等等也会隐藏在树上。

另一个注意事项，这根本不高效，因为它可能最终会隐藏隐藏不需要隐藏的div。

如果我这样做，我会使用jQuery并尝试获得更高效的东西......它将重新发明轮子而不是恕我直言（除非有技术限制或浏览器限制阻止jQuery来自运行）。

Answer 3

试试我的JQuery plugin searchEngine

<强>语法

$(selector).searchengine(textFilter,action,caseSensitive)

对于您的情况，请按以下方式调用它：

var myTxt="dfvdf...."
$('div').searchengine(myTxt,'remove',false);

如果您还想删除包含<p>的所有myTxt：

   $('div,p').searchengine(myTxt,'remove',false);

如果你想隐藏它而不是删除它：

$('div').searchengine(myTxt,'hide',false);

如果你想在之后展示它：

  $('div').searchengine(myTxt,'show',false);

等等

演示：http://jsfiddle.net/abdennour/k3x53/1/