Скрыть все разделители, которые содержат фразу внутри них

Question

Я хотел бы скрыть (удалить) все <div>, содержащие определенную строку. Как фильтр. Подумайте, что у него есть функциональность надстройки браузера.

В принципе ничего, что

1. внутри тега внутри DIV или
2. непосредственно внутри DIV (но не тег)

Любые идеи о том, как лучше всего сделать это эффективно ? В идеале я бы хотел, чтобы браузер хорошо реагировал на это, не только скрывая div, но и удаляя его таким образом, чтобы на странице не было больших пробелов.

Я действительно не очень хорошо разбираюсь в javascript, поэтому подумал, что посмотрю, могу ли я получить некоторые указатели здесь. (И лучше использовать прямые JS или JQuery?)

спасибо!

Answer 1

Попробуйте мой 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/

Answer 2

Во-первых, составить план:

1. Найти все узлы, которые имеют фразу. This SO Q will help.
2. Для каждого найденного вами узла, идите вверх по дереву до тех пор, пока не найдете первый закрывающий div для удаления. См. JQuery dom transversal helpers
3. Затем удалите соответствующие div. Вы можете захотеть анимировать их удаление, для этого также используйте jquery.

Re: Использовать jquery? Вам решать. Если вы хотите, чтобы ваш код работал в нескольких браузерах, то jquery поможет. Ваша проблема может быть решена с помощью jquery или без него.

Удачи.

Answer 3

рубился вместе с этим ответом: 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, это скроет все divs настолько далеко, насколько это возможно, что имеет фразу в их innerHTML. Другими словами, поскольку innerHTML содержит все содержащиеся divs, любой div, содержащий div, который имеет фразу в нем, также будет скрыт и т. Д. Вверх по дереву.

Другое примечание: это совсем неэффективно, поскольку, вероятно, это приведет к избыточному скрытию div, которые не должны быть скрыты.

Если бы я это сделал, я бы использовал jQuery и попытался получить что-то более эффективное ... он будет изобретать колесо, а не IMHO (если нет технических ограничений или ограничений браузера, которые предотвращают jQuery от бега).