Locate all span elements with a specific class using jQuery and conceal the parent divs further up in

I'm currently attempting to identify a specific span element with a particular class and then move up the DOM to find the closest div with another specified class in order to hide it. Is there something I might be overlooking?

Any insights as to why this isn't working would be greatly appreciated.

$(document).ready(function() {
        if ($('.ty-product-detail .product-left .stock-wrap span').hasClass('ty-qty-out-of-stock')) {
          $(this).closest('.ty-product-block__option').hide();
        }
      });
      
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="ty-product-block ty-product-detail">
  <div class="ty-product-block__wrapper clearfix">

    <div class="ty-product-block__img-wrapper">
      <div class="ty-product-block__img cm-reload-487" id="product_images_487_update">

        <div class="ty-product-img cm-preview-wrapper">
          <a id="det_img_link_48756b03bbdd708a_2203" data-ca-image-id="preview[product_images_48756b03bbdd708a]" class="cm-image-previewer cm-previewer ty-previewer" data-ca-image-width="550" data-ca-image-height="330" href="http://beanbags.ambientlounge.com/images/thumbnails/550/550/detailed/2/sakura-pink-2_te4i-3d.jpg?t=1449211457"
            title="">
            <img class="ty-pict    " id...
        </div>

        <!-- Inline script moved to the bottom of the page -->
        <!-- Inline script moved to the bottom of the page -->


        <!-- Inline script moved to the bottom of the page -->

        <!-- Inline script moved to the bottom of the page -->

        <!--product_images_487_update-->
      </div>


    </div>
    <div clas...

javascriptjqueryhtmlcss

Answer №1

In the case where there are multiple span elements involved, you can utilize an each loop to iterate through them as illustrated below:

$('.ty-product-detail .product-left .stock-wrap span').each(function() {
    if ($(this).hasClass('ty-qty-out-of-stock')) {
        $(this).closest('.ty-product-block__option').hide();
    }
});

Answer №2

Figured out the solution with the assistance of "Parixit" and his answer guided me in the right direction. I tidied up the HTML for better readability.

$(document).ready(function() {

  $('.ty-product-detail .product-left .stock-wrap span').each(function() {
    if ($(this).hasClass('ty-qty-out-of-stock')) {
      $('.ty-product-detail').find('.ty-product-options').hide();
    }
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="ty-product-block ty-product-detail">
  <div class="product-left">

    <div class="cm-picker-product-options ty-product-options" id="opt_487">

      <div class="ty-control-group ty-product-options__item product-list-field clearfix" id="opt_487_365">
        <label class="ty-control-group__label ty-product-options__item-label">Option:</label>

        <ul id="option_487_365_group" class="ty-product-options__elem">
          <li>
            <label id="option_description_487_365_731" class="ty-product-options__box option-items cover-only">
              <input type="radio" class="radio" name="product_data[487][product_options][365]" value="731" checked="checked" onclick="fn_change_options('487', '487', '365');">Cover only&nbsp;
            </label>
          </li>
        </ul>
      </div>
    </div>

 

    <div class="ty-product-block__field-group">


      <div class="cm-reload-487 stock-wrap" id="product_amount_update_487">
        <input type="hidden" name="appearance[show_product_amount]" value="1">
        <div class="ty-control-group product-list-field">
          <label class="ty-control-group__label">Availability:</label>
          <span class="ty-qty-out-of-stock ty-control-group__ item" id="out_of_stock_info_487">Out of stock</span>
        </div>
        <!--product_amount_update_487-->
      </div>

 


    </div>




  </div>

</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Text flickering unexpectedly during hover animation in Bootstrap

Encountered a peculiar issue where dark colors flicker during animation. Link to codepen Adding -webkit-backface-visibility: hidden partially resolves the problem, but it also affects font appearance by making it tighter and brighter. This issue is obser ...

cssbootstrap-4

Trouble with downloading a file from an HTML hyperlink

When I attempt to download a file from my file folder using the absolute path <a href='N:\myName\test.xlsx'>download</a>, the file opens directly instead of downloading. However, if I use the relative path <a href=&apos ...

javascripthtmlhyperlink

Marquee is experiencing issues with incomplete scrolling

Hello everyone, I have been trying to implement a stock market ticker on my website. Initially, I used the marquee tag and it worked fine. Then I tried using simple scroll within the PHP UserCake user management system, but unfortunately, it is not working ...

phpjqueryhtmlcssusercake

What are your thoughts on having an ajax function that can return either JSON or HTML depending on its success status?

In my jQuery ajax function, I am facing an issue where it responds with HTML if the call fails, and with JSON if the call is successful: {"result":true} $.ajax({ type: 'POST', dataType: 'html', success: func ...

jqueryajax

Explore further for additional information

I'm searching for a solution. Take this example in the pen ( codepen ), you'll find a read more and read less button set up. But how can I make this work with an HTML tag within the content? For instance, the 'more' class has the openi ...

javascriptjqueryhtml

Views.py Not Calling Correct Function from Ajax URL as Specified in urls.py

I recently started using Ajax for generating some pie charts, but I encountered an issue with the data-ajax-url attribute not working as expected. According to my urls.py file, reptibase:item-update should trigger the item_update function in my views.py fi ...

jquerydjangoajaxdjango-viewsdjango-urls

Whenever I'm rendering my handlebars template, it unexpectedly gets terminated on its own

I have encountered an issue with my handlebar template. For some reason, a closing tag is being automatically inserted just before any closing tag in the template, causing it to be recognized as plain text. If you visit the following page: For example: { ...

javascriptphphandlebars.js

The attempt to execute 'removeChild' on 'Node' was unsuccessful due to an uncaught DOMException

'removeChild' execution failed on 'Node': The specified node is not a child of this element. Whenever I run the code below, an error occurs. Is there a solution to fix this issue? function clickLinks(links) { for(var item in links) ...

javascripthtml

Encountering vuex error when attempting to send data to Django backend

Currently, I am facing an issue while attempting to transmit data from my Vue.js frontend to the backend using Vuex and Vue-axios. Despite establishing a Vuex store and Vue-axios services, I encounter an error that reads [vuex] unknown action type: addGene ...

javascriptvue.jsaxioshttprequestvuex

Establish a connection to couchDB using JavaScript on the server side

I'm working on a piece of code that involves using Restify to set up a server in node.js and create specific routes. My goal is to interact with CouchDB by performing actions such as GET, POST, DELETE, and PUT. var restify = require("restify"); var s ...

javascriptajaxhttpcouchdbnosql

Simple server using node.js and express to host an HTML file and associated resources

I am currently experimenting with frontend development and need a basic web server to quickly start projects and serve files. Specifically, I have one index.html file along with some css/js/img files. I decided to work with Node.js and Express for this pur ...

javascriptnode.jsexpress

Exploring Vue JS: A guide to using the onChange event to dynamically update input values

I am currently utilizing the npm package vue-range-component to adjust values via a slider, which then dynamically updates in the input field. However, I'm encountering an issue with applying the onChange event for inputs. I need to have the ability ...

javascriptvue.jsvuejs2onchange

Transferring data through asynchronous JavaScript and XML streaming

Is there a way to access AJAX data before the request is complete in order to achieve streaming, similar to the example below: ajax_request.send(); interval = setInterval(function() { continueParsing(ajax_request.responseText); if (download_comple ...

javascriptajaxstreaming

After executing the next function, res.locals in Express.js middleware is available

I recently created a middleware function for caching in my project, shown below: import asyncHandler from 'express-async-handler'; import cache from '../cache'; export async function cacheMiddleware(req, res, next) { // Check if da ...

javascriptnode.jsexpressmiddleware

How can we create dynamic animations with a counter in A-Frame?

I am looking for a more efficient method to sequentially execute animations one after the other, with each animation playing "X" number of times. Due to the randomness of animations being selected from arrays, I cannot consolidate them into a single long ...

javascriptanimationthree.jsaframe

Is there a way to optimize this JQuery code for better efficiency?

I am new to using JQuery and I have a list of about 20 elements that need to be disabled when the page loads. These elements include various HTML <input> elements, each with unique IDs that follow a specific naming convention. $('#rmX&b ...

jquery

Transferring data from JavaScript to PHP through Ajax communication

Allowing users to comment on your page and saving those comments in a database is an important feature. While you have the database part covered, you are looking for assistance with passing text input from JavaScript to PHP. Your goal is to echo the ' ...

javascriptphpajax

Modifying a variable when a specific number of elements are clicked using jQuery

I have created a script for my portfolio that is functional but I want to streamline it so that I only need to edit the HTML, not the script itself. The main requirements for the code are: Count the number of <img> tags within the element with id ...

jquerycssvariables

Guide on transferring data from a DIV element to a form based on PHP

Is it possible to submit the value of a DIV element acting as a checkbox in a PHP form? I'm having trouble getting the DIV response to pass to the PHP file. HTML: <form action="test.php" method="post"> <div id=" ...

phpjqueryhtml

I've been attempting to load an EJS file, but the page has been loading for what seems like an eternity

app.get('/all-datas', (req, res) => { data.find({}, function (err, names) { res.render('EJS.ejs', { nameList: Uname }) }) }) I'm trying to incorporate this code into my JavaScript application. However, whene ...

javascriptnode.jsmongodb