CODEWITHSUNDEEP
javascripthtmljquery
Ale Van Houtte
Ale Van Houtte

Reputation: 55

get div value in a card when click on another part of the card/div

I have several cards with the following structure:

<div class="uploaded_image">
  <div class="image_actions" data-image-id="1">
    <div class="actions_button rename">Rename</div>
    <div class="actions_button delete">Delete</div>
    <div class="actions_button publish published">Publish</div>
  </div>
  <img src="/image/Screen_Shot_2018-03-21_at_10_16_35.png">
  <div class="image_name">Screen_Shot_2018-03-21_at_10_16_35.png</div>
</div>

And then a jquery that goes like this:

$(".actions_button.delete").click(function(){
  let image_id = $(this).closest("[data-image-id]").data("image-id");
  let test = $(this).closest("div.image_name").html();
  console.log('data id: ' + image_id);
  console.log('image name: ' +  test);
})

what I'm trying to do is when somebody clicks on the delete button, you get in the console the id (that works ok) and the text in the div with the class image_name. I'm not sure if it is really early and my brain can't see the error or what but i can't make it work. I've tried other variants but I must be missing something really stupid... help?

Upvotes: 0

Views: 171

Answers (2)

Always Helping
Always Helping

Reputation: 14570

You can simply use parent() and siblings method to get the div.image_name

Since .closest method only works in the same tree level since the image_name is outside the actions_buttons - thats why you getting undefined.

Working Demo:

$(".actions_button.delete").click(function() {
  let image_id = $(this).closest("[data-image-id]").data("image-id");
  let test = $(this).parent().siblings('div.image_name').text()
  console.log('data id: ' + image_id);
  console.log('image name: ' + test);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="uploaded_image">
  <div class="image_actions" data-image-id="1">
    <div class="actions_button rename">Rename</div>
    <div class="actions_button delete">Delete</div>
    <div class="actions_button publish published">Publish</div>
  </div>
  <img src="/image/Screen_Shot_2018-03-21_at_10_16_35.png">
  <div class="image_name">Screen_Shot_2018-03-21_at_10_16_35.png</div>
</div>

Upvotes: 1

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27051

You have to use $(this).closest(".uploaded_image").find("div.image_name").

Since div.image_name is not a parent of your delete button.

Note you don't have to use .html() to get the text of the div, but you can use .text()

DEMO

$(".actions_button.delete").click(function(){
  let image_id = $(this).closest("[data-image-id]").data("image-id");
  let test = $(this).closest(".uploaded_image").find("div.image_name").text();
  console.log('data id: ' + image_id);
  console.log('image name: ' +  test);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="uploaded_image">
  <div class="image_actions" data-image-id="1">
    <div class="actions_button rename">Rename</div>
    <div class="actions_button delete">Delete</div>
    <div class="actions_button publish published">Publish</div>
  </div>
  <img src="/image/Screen_Shot_2018-03-21_at_10_16_35.png">
  <div class="image_name">Screen_Shot_2018-03-21_at_10_16_35.png</div>
</div>

Upvotes: 2

Related Questions