How can I from the text of Grid content to hide one row?

Question

I want to click “dialog-btn-hide” button to hide one row which include 'NO.2，Eric，182。

It means from the 'th->NO.2' data to get it parent 'tr'，and hide this 'tr' row

How can I do?

 <Script>$(function () { $('#dialog-btn-hide').click(function () { //The code is invalid var lsTemp = $("#myTable tr th[text='NO.2']"); lsTemp.hide(); }); </Script> 

 <table class="table table-hover table-bordered" id="myTable"> <tbody> <tr class="clickable-row"> <th>NO.1</th> <td>John</td> <td>185</td> </tr> <tr class="clickable-row"> <th>NO.2</th> <td>Eric</td> <td>182</td> </tr> <tr class="clickable-row"> <th>NO.3</th> <td>Tim</td> <td>180</td> </tr> </tbody> </table> <div class="form-group"> <div class="col-xs-12"> <div class="text-center"> <button id="dialog-btn-hide" >Hide</button> </div> </div> </div> 

Answer 1

Use following JS code and it will work

$('#dialog-btn-hide').click(function () {
        //The code is invalid 
        var lsTemp = $("#myTable tr:contains('NO.2')");
        lsTemp.hide();
});

Your code does not work because your selector cannot find any element.

Answer 2

You can use contains selector:

https://api.jquery.com/contains-selector/

But you should use attribute 'data' selector for improved performance, maintenance and simplier testing:

https://tympanus.net/codrops/css_reference/attribute-selectors/