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.
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>