Steps to conceal a div when a particular property is detected in one of its child elements (img)

Question

Steps to conceal a div when a particular property is detected in one of its child elements (img)

On my website, I have a label and a checkbox. The checkbox in question is created by Salesforce (thus the dynamic appearance of the span id).

This excerpt shows the code from my webpage:

<div class="fds" id="checkinput">
<label>Additional Review</label>
<span id="j_id0:asp-acc-details:as-c1">
<img src="/img/checkbox_checked.gif" alt="Not Checked" width="21" height="16" class="checkImg" title="Not Checked">
</span>
</div>

The span tag and its associated img are both dynamically generated through Salesforce.

I am wondering if it is possible to use jQuery to make the "checkinput" div hidden or invisible if the title (or alt) of the img tag reads "Not Checked".

Is this feasible?

javascript jquery html css

Answer 1

Answer №1

Implement the find and attr methods to access the image and its title attribute. Then, utilize the hide method to conceal the div

var defaultTitle = "Unchecked";

var imageTitle = $("#checkinput").find("img").attr('title');
if (imageTitle === defaultTitle) {
  $("#checkinput").hide()

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fds" id="checkinput">
  <label>Additional Review</label>
  <span id="j_id0:asp-acc-details:as-c1">
<img src="/img/checkbox_checked.gif" alt="Not Checked" width="21" height="16" class="checkImg" title="Not Checked">
</span>
</div>

Answer 2

Implement the find and attr methods to access the image and its title attribute. Then, utilize the hide method to conceal the div

var defaultTitle = "Unchecked";

var imageTitle = $("#checkinput").find("img").attr('title');
if (imageTitle === defaultTitle) {
  $("#checkinput").hide()

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fds" id="checkinput">
  <label>Additional Review</label>
  <span id="j_id0:asp-acc-details:as-c1">
<img src="/img/checkbox_checked.gif" alt="Not Checked" width="21" height="16" class="checkImg" title="Not Checked">
</span>
</div>

Answer 3

Answer №2

To check the attributes of your image, you can utilize the attr() method:

(function() {
  var img = $(".checkImg");
  if (img.attr("title") === "Not Checked" || img.attr("alt") === "Not Checked")
    $("#checkinput").hide();
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fds" id="checkinput">
  <label>Additional Review</label>
  <span id="j_id0:asp-acc-details:as-c1">
     <img src="/img/checkbox_checked.gif" alt="Not Checked" width="21" height="16" class="checkImg" title="Not Checked"/>
  </span>
</div>

Edit If you have multiple similar div elements with images and need to handle them together, try this approach:

(function() {
  $(".fds img").each(function() {
    var img = $(this);
    if (img.attr("title") === "Not Checked" || img.attr("alt") === "Not Checked")
      img.closest(".fds").hide();
  });
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fds" id="checkinput1">
  <label>Review</label>
  <span id="j_id0:asp-acc-details:as-c1">
     <img src="/img/checkbox_checked.gif" alt="Checked" width="21" height="16" class="checkImg" title="Checked"/>
  </span>
</div>
<div class="fds" id="checkinput2">
  <label>Additional Review</label>
  <span id="j_id0:asp-acc-details:as-c2">
     <img src="/img/checkbox_checked.gif" alt="Not Checked" width="21" height="16" class="checkImg" title="Not Checked"/>
  </span>
</div>

Answer 4

To check the attributes of your image, you can utilize the attr() method:

(function() {
  var img = $(".checkImg");
  if (img.attr("title") === "Not Checked" || img.attr("alt") === "Not Checked")
    $("#checkinput").hide();
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fds" id="checkinput">
  <label>Additional Review</label>
  <span id="j_id0:asp-acc-details:as-c1">
     <img src="/img/checkbox_checked.gif" alt="Not Checked" width="21" height="16" class="checkImg" title="Not Checked"/>
  </span>
</div>

Edit If you have multiple similar div elements with images and need to handle them together, try this approach:

(function() {
  $(".fds img").each(function() {
    var img = $(this);
    if (img.attr("title") === "Not Checked" || img.attr("alt") === "Not Checked")
      img.closest(".fds").hide();
  });
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fds" id="checkinput1">
  <label>Review</label>
  <span id="j_id0:asp-acc-details:as-c1">
     <img src="/img/checkbox_checked.gif" alt="Checked" width="21" height="16" class="checkImg" title="Checked"/>
  </span>
</div>
<div class="fds" id="checkinput2">
  <label>Additional Review</label>
  <span id="j_id0:asp-acc-details:as-c2">
     <img src="/img/checkbox_checked.gif" alt="Not Checked" width="21" height="16" class="checkImg" title="Not Checked"/>
  </span>
</div>

Answer 5

Answer №3

Utilize jQuery $("[],[]") OR syntax for selecting based on those particular attributes.

    $( "[img[alt='Not Checked']], [img[title='Not Checked']]" ).each(function(img) {
      
      $(img).parent().parent().hide() // utilizing parent relationship to hide

      // $(img).closest(".fds").hide() // alternative method using class for hiding
      // $("#checkinput").hide(); // another option using id for hiding
    })

Answer 6

Utilize jQuery $("[],[]") OR syntax for selecting based on those particular attributes.

    $( "[img[alt='Not Checked']], [img[title='Not Checked']]" ).each(function(img) {
      
      $(img).parent().parent().hide() // utilizing parent relationship to hide

      // $(img).closest(".fds").hide() // alternative method using class for hiding
      // $("#checkinput").hide(); // another option using id for hiding
    })

Steps to conceal a div when a particular property is detected in one of its child elements (img)

Answer №1

Answer №2

Answer №3

Similar questions

Get rid of all numbers from a jQuery selection except for the first and last

Troubleshooting: Why Won't My JQuery Disable the Radio Buttons?

How can I ensure that a list of cards is 100% in height?

Display the results of the constantly changing JSON response

Registering components globally in Vue using the <script> tag allows for seamless integration

Currently, I am on a quest to locate a particular item within an array through the power of node.js

Using Jquery to adjust the width of table cells within a div container

"The JQuery .validate method is not compatible with this property or method" - error message displayed

Function that returns an array

Obtaining information from HTML through regular expressions

Controlling the document object model of a third-party website within the Electron framework

Issues persist with the functionality of form validation as red error messages are not being displayed as anticipated using PHP, AJAX, jQuery,

What could be causing my HTML element to vanish once the animation is complete?

Determine if an option is chosen in multiple select elements using Vanilla JavaScript

MSW is not effective when utilized in functions within certain contexts

Location of Custom HTML Widget in Django-Dashing

Creating a dynamic mongoDB query string for field selection in a JavaScript application: A step-by-step guide

Looking for some help with a quick jQuery mouseleave inquiry

JS/Electron Insert items individually

Having trouble extracting text from a webelement using Python's Selenium