Cannot get src of image using jQuery

Question

I have a close button which is used to get an image src positioned just above it:

<div class="col">
    <img class="img-thumbnail" src="/path/to/image2.gif">
    <br>
    <span class="img-remove">x</span>
</div>

jQuery:

$(document).on('click', '.img-remove', function () {
    let _self = this;
    let img_src = $(this).closest('.img-thumbnail').attr("src");
    console.log('img_src', img_src);
});

However instead of src value I get this in console:

img_src undefined

What is wrong here and how can I fix it?

HI, you can use $(this).closest('.col').find('.img-thumbnail').attr('src') — Swati
– Swati, Commented Dec 23, 2020 at 5:36
@Swati Yes, this one works! Just wondering why mine did not work? shouldn't closest look upward this div? — MBH
– MBH, Commented Dec 23, 2020 at 5:38

Linh Hy · Accepted Answer · 2020-12-23 05:50:04Z

2

Change $(this).closest('.img-thumbnail') to $(this).siblings('.img-thumbnail') will solve your issue

Example code:

$(document).on('click', '.img-remove', function () {
    let _self = this;
    let img_src = $(this).siblings('.img-thumbnail').attr("src");
    console.log('img_src', img_src);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
    <img class="img-thumbnail" src="/path/to/image2.gif">
    <br>
    <span class="img-remove">x</span>
</div>

Explain:

$(this) is span.img-remove, .closet() will traversing up through its ancestors. But you need to find img.img-thumbnail, it's sibling of $(this) not ancestors. So you need to use .siblings() to find the sibling.

edited Dec 23, 2020 at 5:50

answered Dec 23, 2020 at 5:41

Linh Hy

469 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

double-beep · Accepted Answer · 2020-12-23 06:51:19Z

0

$(document).on('click', '.img-remove', function() {
  let _self = this;
  let img_src = $(this).closest('.col').find('.img-thumbnail').attr("src");
  console.log('img_src', img_src);
});

edited Dec 23, 2020 at 6:51

double-beep

5,66019 gold badges43 silver badges50 bronze badges

answered Dec 23, 2020 at 5:39

Alsa

15 bronze badges

Collectives™ on Stack Overflow

Cannot get src of image using jQuery

2 Answers 2

Explain:

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Explain:

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related