How to find the closest sibling in jQuery

Question

I am trying to learn jQuery, I have following mark up

In a div, I have two texts date and description and two buttons edit and delete.

When I click the edit button, I want to get the date and description of that div

Here I am trying to get it using parents() selector, how can I use closest() selector here , if it is not possible with the current markup please suggest how can I proceed with closest() selector.

$(document).ready(function() {
  //If i click on edit button . I want to select the corresponding date and description .How can we do that?

  $(".taskTemplate .edit").on('click', function(event) {
    editTask(event.target);
  });
});

function editTask(node) {

  var date = $(node).parents('.taskTemplate').find('.date').html();
  alert(date);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="taskTemplate">
  <span class="date">205-10-09</span>
  <span class="desc">description of task</span>
  <input type="button" class="edit" value="edit">
  <input type="button" class="delete" value="delete">
  <span class="done">done</span>
</div>

<div class="taskTemplate">
  <span class="date">2015-11-19</span>
  <span class="desc">description of task2</span>
  <input type="button" class="edit" value="edit">
  <input type="button" class="delete" value="delete">
  <span class="done">done</span>
</div>

Answer 1

Just replace parents() by closest() in :

var date = $(node).closest('.taskTemplate').find('.date').html();

Hope this helps.

$(document).ready(function() {
  $(".taskTemplate .edit").on('click', function(event) {
      editTask(event.target);
  });
});

function editTask(node) {
  var closest_div = $(node).closest('.taskTemplate');
  
  var date = closest_div.find('.date').text();
  var description = closest_div.find('.desc').text();

  console.log(date, `|`, description);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="taskTemplate">
  <span class="date">205-10-09</span>
  <span class="desc">description of task</span>
  <input type="button" class="edit" value="edit">
  <input type="button" class="delete" value="delete">
  <span class="done">done</span>
</div>

<div class="taskTemplate">
  <span class="date">2015-11-19</span>
  <span class="desc">description of task2</span>
  <input type="button" class="edit" value="edit">
  <input type="button" class="delete" value="delete">
  <span class="done">done</span>
</div>

Answer 2

When i click the edit button, i want to get the date and description of that div

You can use .siblings() to select .date, .desc siblings of .edit element

$(document).ready(function() {
  //If i click on edit button . I want to select the corresponding date and description .How can we do that?

  $(".taskTemplate .edit").on('click', function(event) {
    editTask($(this).siblings(".date, .desc"));
  });
});

function editTask(nodes) {
 var data = $.map(nodes, function(el) {
    return `${el.className}: ${el.textContent}`
  }).join(", ");

  alert(data);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="taskTemplate">
  <span class="date">205-10-09</span>
  <span class="desc">description of task</span>
  <input type="button" class="edit" value="edit">
  <input type="button" class="delete" value="delete">
  <span class="done">done</span>
</div>

<div class="taskTemplate">
  <span class="date">2015-11-19</span>
  <span class="desc">description of task2</span>
  <input type="button" class="edit" value="edit">
  <input type="button" class="delete" value="delete">
  <span class="done">done</span>
</div>