Dennis Offinga Dennis Offinga - 1 month ago 11
CSS Question

Closing a div when clicking on a button which is inside of the same div

Make so simple to answer but it is unable for me to make it work...
The title says it all so maybe someone can help me out.

_doc.on('click','.settings',function() {
$('.icon-bar').fadeIn(200);
});

_doc.on('click','.close_btn',function(e) {
$('.icon-bar').hide(e.currentTarget.id);
$('.icon-bar').fadeOut(200);
});


The button who opens it is called 'settings' and the one who should be closing the div is called 'close_btn'.

Answer

Let me try to explain. When user clicks on button our event will trigger

_doc.on('click','.close_btn',function(e) {

});

Here we can use closest()

_doc.on('click','.close_btn',function(e) {
   jQuery(this).closest('div').hide();
});

If we want to use class selector

_doc.on('click','.close_btn',function(e) {
   jQuery(this).closest('.parent_div').hide();
});

It will hide button and parent element with class="parent_div". Let me know if more explanation is needed.