CODEWITHSUNDEEP
jqueryhidecontains
Jim
Jim

Reputation: 23

Hide DIV based on text value within DIV

I am fairly new to JQuery and am trying to hide the DIV #SAlertWrap when the contents of td.ms-vb contain the text "There are currently no active announcements". td.ms-vb is contained within #SAlertWrap.

I can hide the DIV itself but cannot figure out how to hide it based on the text value.

$(document).ready(function() {
$('#SAlertWrap').hide( );
});

I can also select the text to hide or replace the text, but that only effects that particular row.

$(document).ready(function() {
$("td.ms-vb:contains('There are currently no active announcements')").parent().hide();
});

I tried replacing parent() with $('#SAlertWrap') and kept getting syntax errors.

Any ideas on how to combine these?

Thank you

Upvotes: 2

Views: 2224

Answers (3)

Daniel
Daniel

Reputation: 13122

Using your method, but with .parent() with the optional selector. If your td is not an immediate child use .parents() instead.

$(document).ready(function() {
  $("td.ms-vb:contains('There are currently no active announcements')")
   .parents('#SAlertWrap').hide();
});

A slight performance improvement may be to use .closest instead of parents.

Upvotes: 3

tymeJV
tymeJV

Reputation: 104775

You can do:

if ( $("td.ms-vb:contains('There are currently no active announcements')").length )
    $('#SAlertWrap').hide( );

.length checks the array of matching elements provided by your selector. If the length is greater than 0, then hide your element. (0 is falsy in JS)

Upvotes: 0

Ibrahim AshShohail
Ibrahim AshShohail

Reputation: 2182

$(document).ready(function() {
  if ($("td.ms-vb").text() == 'There are currently no active announcements') {
    $("td.ms-vb").parent().hide();
  }
});

Upvotes: 0

Related Questions