Focusing on a specific element

When clicked, I want to target the child of the sibling of the parent's parent. There are multiple containers, so when removal is clicked, only the image in that specific div should be changed.

I have tried using this jQuery code, but it doesn't seem to be working. Am I missing something with an extra parent?

$('.removal').click(function() {
  $('this').parent().siblings('.item-img').find('.productImage').addClass('cart-removal-item-img')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="container">
  <div class="item-img">
    <img class="productImg" src... />
  </div>

  <div class="rndm1">
  </div>

  <div class="rndm1">
  </div>

  <div class="item-action">
    <div class="rndm1"></div>
    <p><a class="removal" href="">remove</a></p>
  </div>

</div>
jquerycsstargeting

Answer №1

After correcting two minor errors (adding quotes around 'this' and fixing the misspelled image class), I was able to successfully run this piece of code

$('.removal').on("click",function(e) {
  e.preventDefault(); // prevent the click action
  $(this).closest(".container") // locate the container div
    .find('.productImg') // select the specific image class 
    .addClass('cart-removal-item-img');
});
.cart-removal-item-img { display: none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="container">
  <div class="item-img">
    <img class="productImg" src="http://lorempixel.com/400/200/sports/" />
  </div>

  <div class="rndm1">
  </div>

  <div class="rndm1">
  </div>

  <div class="item-action">
    <div class="rndm1"></div>
    <p><a class="removal" href="">remove</a></p>
  </div>

</div>

Answer №2

It dawned on me that the solution to my query was simply adding an additional .parent() method.

<script>
 $('.removal').click(function(){
        $(this).parent().parent().siblings('.item-img').find('.productImage').addClass('cart-removal-item-img')
    });
</script>

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

Tips for correctly appending a span element

I am trying to implement an icon of valid or error to be appended to the input, similar to the example shown on http://getbootstrap.com/css/#forms-control-validation. Here is the code I have written for this purpose: $(document).ready(function(){ $(&a ...

javascriptjquery

AngularJS child element hover effect on border

My directives have a hierarchical relationship and can be nested quite deeply. I want to add a border when hovering over one of the directives. When using :hover {}, the border appears on both the child and parent elements. Is there a more appropriate or ...

angularjscss

Populating dropdowns with JavaScript/jQuery based on the value of the first dropdown

I've been using this particular code to dynamically populate select options based on the first selection. Everything seems to be working perfectly fine until I submit the form with AJAX and then attempt to choose a different option from the select dro ...

jqueryformsselect

IE browser not sending ajax request with jQuery's $.getJSON method (works fine in FF and Chrome)

While using IE9's debug mode, I placed a breakpoint on the first line below and it was hit successfully. However, the breakpoint set on the first line in the callback function is never triggered. Upon checking the Network tab, I noticed that there is ...

jqueryinternet-explorerinternet-explorer-9getjson

Update the image and heading simultaneously when hovering over the parent div

I am looking to enhance the user experience on my website by changing the color of headings and images when a user hovers over a specific section. Currently, I have been able to achieve this effect individually for each element but not simultaneously. Any ...

javascriptjquerycsshover

Issue with Carousel functionality in Bootstrap 3.1.1

Using Xcart, PHP5.6, and Bootstrap 3.1.1 The objective is to create a carousel that displays 3 items at once and cycles through a total of 5 items. Despite confirming that the necessary libraries are included and in the correct locations, the carousel fa ...

htmlcsstwitter-bootstrapcarousel

dragging to scroll horizontally through a list of cards

I'm currently working on a website using Bootstrap, CSS, HTML, and JS. I'm struggling to figure out how to make the product cards move horizontally without requiring a scrollbar. Is there a way to do this with just clicking and dragging? <l ...

javascripthtmlcssbootstrap-4

Divergent find function behavior in jQuery when applied to div or tbody

I've encountered an issue while using the jQuery find selector by Id with a div and tbody. Let me simplify my problem for better understanding. HTML <div id='iamdiv'>HELLO</div> <table> <tbody id='iamtbody' ...

javascriptjqueryhtmlcssselector

Is it possible to dynamically center align an image based on varying column widths in Bootstrap 4?

Hello everyone, I am currently working with Bootstrap 4 and have a column containing an image as shown in the code snippet below: <div className='col-xs-12 col-sm-5 col-md-4 col-lg-3'> <img src={movie.Poster} className='movie ...

htmlcssbootstrap-4

Implementing a document update event using jQuery

On my WordPress site, I am using a responsive lightbox plugin. When an image is clicked, it opens a popup box with the ID fullResImage. Now, I would like to incorporate the Pinch Zoomer function to it. Do I need to bind a function for this, or is there a s ...

javascriptjquerywordpresslightbox

Determine the total width by adding together the widths of all child elements

Does anyone know how to calculate the total width of parent element (#projects) based on the combined widths of all child elements (.project)? I tried using jQuery but couldn't get it to work. Any help would be greatly appreciated! Thank you! var to ...

jquerydynamic

Setting a pivot point for a nested SVG element: A step-by-step guide

Today, I decided to delve into the world of CSS Transforms. With a desire to explore, I set out to create a mobile button using SVG and various transforms. The challenge at hand is to rotate the mobile button by 90 degrees with a transform origin right at ...

htmlcsssvgtransform

How can you refresh a webpage with Javascript only one time?

When I use the resize function to reload my page, I only want it to reload once when the page size changes from small (less than or equal to 768px) to big or vice versa. Here is my current code: $(window).resize(function(){ // if(document.body.clientWid ...

javascriptcssresizereload

Tips to ensure the div remains 100vh in height, even when empty

As I work on a simple webpage with a header, body, and footer, it's essential for me to ensure that the content takes up the entire height of the page using 100vh. However, if I only have plain text in the body section without any child tags, it ends ...

htmlcssreactjs

Manipulate date inputs in ASP.NET Core 2 Razor using jQuery

Having an issue with jQuery in my ASP.NET Core Razor form. I can successfully change values using jQuery for input types like text, but for some reason I can't do the same for input type date. Here is a snippet of the Project model, specifically the ...

jqueryrazorasp.net-core

What is the reason the picture was not successfully duplicated into the directory?

I am currently utilizing Ajax and PHP in my project. I am trying to implement a functionality where I can upload an image without having to click the submit button. I found a solution mentioned in this answer: How to upload file using jquery ajax and php ...

phpjqueryhtmlajax

What is preventing me from specifying a maximum width for Instagram iFrames in my scss files?

Managing the width of my Instagram embeds has been a challenge for me. I attempted to set a max-width in my scss files, but for some reason, it never seems to be applied. The only way I can actually get it to the desired width is by using the inspector and ...

htmlcsstailwind-css

Determine if a value is numeric using JQuery's .is

I am currently working with a text box that has an id of EmpNum. I have been struggling to utilize jQuery's isNumeric function in order to determine if the value entered is numeric or not. Here is what I attempted: ('#EmpNum').isNumeric(); ...

jquery

The image inside an Ionic card's header will automatically adjust its size when text is added

Two cards are currently being displayed on the page: <ion-header> <ion-navbar> <ion-title>Home</ion-title> </ion-navbar> </ion-header> <ion-content padding> <ion-card class="offersCard"> ...

cssionic-frameworksassionic3

How to reposition the Bootstrap navbar Logo from the left to the center

I am looking to change the ordering of Bootstrap 4 Navbar. Currently, the logo is on the left side, but I want it in the center with menus on both sides. Can someone help me with changing this order? Check out the current Navbar layout below: <nav c ...

javascripthtmlcss