Hide a table row if a cell inside contains a specific word

Question

I would like to be able to hide a table row, only if a cell inside the table contains the word Complimentary, on all pages in my website.

An example page is here: https://widac.com.au/event/widac-event/

this picture shows the part I was to be hidden from view:

if anyone can tell me how to do this - it would be greatly appreciated!

Answer 1

$('#tblId tr').each(function() {
    $(this).find('td')..each(function() {
       if (this.textContent.includes('Complimentary')) {
           $(this).parent().hide();
       }
    });
});

#tblId is id of that particular table and i iterate on tr and inside each of tr, i invoke each of td, i match the content and hide that particular tr

Answer 2

javascript:

document.querySelectorAll('td').forEach(function(td) {
  if (td.textContent.includes('Complimentary')) {
    td.parentElement.style.display = 'none';
  }
});

jQuery:

$('td').each(function() {
  if (this.textContent.includes('Complimentary')) {
    $(this).parent().hide();
  }
});

Although in your example site, .tribe-tickets-form-row has display: block !important , which overrides this. You could set .opacity = 0 , although it would still be interactable. Or you could just straight up .remove() it.

Answer 3

    $(".tribe-events-tickets tr").each( function (el) {
        $(this).children().each(function () {
            var text = $(this).text();
            if (text.indexOf("Complimentary") !== -1 ) {
                $(this).parent().hide();
            }
        });
    });

This can help, but at first this CSS rule in your code should be modified:

   .tribe-tickets-form-row {
    margin-top: 20px;
    display: block !important;
   }

remove the '!important', it doesn't allow to hide elements. I hope it'll help.