JQuery hiding/showing closest divs

Question

When a user clicks on a certain icon, I want to hide/show relevant divs that are appropriate upon that action.

This is the JQuery I use:

$('.aTask').on('click','.descHide',function(){
    $(this).closest('.taskDesc').hide();
    $(this).closest('.descShow').show();
    $(this).closest('.descHide').hide();
});

$('aTask').on('click','.descShow',function(){
    $(this).closest('.taskDesc').show();
    $(this).closest('.descShow').hide();
    $(this).closest('.descHide').show();
});

$('#showTasks').on('click','.delete',function(){
    $(this).closest('.aTask').remove();
});

But the intended actions do not happen as can be shown in this JSFIddle . Where I would click on the minus sign a plus sign should appear and the text below should either disappear or appear.

Answer 1

Use .parent().find(...) instead of .closest(...) . Also, id s must be unique.

Fiddle

$('.aTask').on('click', '.descHide', function () {
    $(this).parent().find('.taskDesc').hide();
    $(this).parent().find('.descShow').show();
    $(this).parent().find('.descHide').hide();
});

// you had a typo here $('aTask')
$('.aTask').on('click', '.descShow', function () {
    $(this).parent().find('.taskDesc').show();
    $(this).parent().find('.descShow').hide();
    $(this).parent().find('.descHide').show();
});

$('#showTasks').on('click', '.delete', function () {
    $(this).closest('.aTask').remove();
});