CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Dennis Offinga
Dennis Offinga

Reputation: 95

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

Upvotes: 0

Views: 1819

Answers (3)

Mohit
Mohit

Reputation: 51

Do you want something like this ?

check this fiddle : https://jsfiddle.net/egocgn9y/

css :

div{
  border : 2px solid green;
  width : 100px;
  height : 100px;
  float: left;
  margin-left : 2px;
}
div input[type="button"]{
  float:right;
}

html : 

<div>
  <input id="btnClose1" type="button" Value="X">
</div>
<div>
  <input id="btnClose2" type="button" Value="X">
</div>

js :

$('#btnClose1').on("click", function(){
  this.parentElement.remove();                 
});
$('#btnClose2').on("click", function(){
  this.parentElement.remove();               
});

Upvotes: 1

Hitesh Jangid
Hitesh Jangid

Reputation: 210

Try this 

    //to remove completely from page
        $('.button_class').parents('.parent-div-class').remove();
    // to hide only
     $('.button_class').parents('.parent-div-class').fadeOut('fast');

parents function will select outter wrap div of this button like 

         <div class="parent-div-class">
            <div>
               <button attribse></button>
           </div>
        </div>

Upvotes: 0

Tahir Shahzad
Tahir Shahzad

Reputation: 649

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.

Upvotes: 1

Related Questions