Remove all <tr> If does not contain “test” in text

Question

I am making a chrome extension for the first time and need a little help with my Javascript.

In my popup menu I want a few buttons. Once someone presses this button lets say button "test". I want it to remove every single <tr> whom does not contain the word "test" .

I am making this because the filter functionality on this website I use a lot is very slow. This way I can filter faster myself by removing the rows instead of the program searching through all of them.

This is what I have so far:

 var searchString = 'TEST'; $("#tbody tr td:contains('" + searchString + "')").each(function Tester() { if ($(this).text() != searchString) { $(this).parent().remove(); } }); 

 <p>Remove all rows which don't contain:</p> <button onclick="Tester()">TEST</button> 

Answer 1

Firstly don't use inline JS. It's bad practice. Attach event handlers using unobtrusive JS instead.

To fix your actual issue, use the :contains selector along remove() , something like this:

 $('button').click(function() { var searchString = $(this).text(); $("#tbody tr td:contains('" + searchString + "')").closest('tr').remove(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p>Remove all rows which don't contain:</p> <button>TEST</button> <table> <tbody id="tbody"> <tr> <td>TEST</td> </tr> <tr> <td>Foo</td> </tr> <tr> <td>TEST</td> </tr> <tr> <td>Bar</td> </tr> </tbody> </table> 

Answer 2

Try this

$("#tbody tr td").each( function () {
    if ( $(this).text().indexOf( searchString ) == -1 ) { //notice the use of indexOf
        $(this).parent().remove();//
    }
});

Or you can check the row's text itself

$("#tbody tr").each( function () {
    if ( $(this).text().indexOf( searchString ) == -1 ) { 
        $(this).remove();//
    }
});