CODEWITHSUNDEEP
javascriptjqueryhtmlcss
ShahePars
ShahePars

Reputation: 135

Hide parent's parent's div on click using jQuery

i need wehen click on span.opn, then toglle ( hide / Show ) the .body div

<li class="panel">

  <div class="head">

    <span class="del"></span>
    <span class="opn"></span>

  </div>

  <div class="body">

   <!-- Something -->

  </div>

</li>

JS

// Need to Change .opn Class or add some class

// Need to toglle ( hide / Show ) < div class="body" >

jQuery('.opn').on('click', function() {

  jQuery(this).closest('.body').toggle();

});

// Need to ( delete / remove ) < li class="apanel" > when click on this ( .del )

jQuery('.del').on('click', function() {

  jQuery('li.panel').remove();

});

Thank You

Upvotes: 0

Views: 1567

Answers (3)

ScanQR
ScanQR

Reputation: 3820

You need to first find parent element and then find next div with body class as follows,

jQuery('.opn').on('click', function() {

  jQuery(this).parent().next('div.body').toggle();

});

Upvotes: 1

pawan.sis
pawan.sis

Reputation: 29

$(document).on("click",".opn",function(){
   $(".body").toggle();
});

Upvotes: 3

Mehmet Baker
Mehmet Baker

Reputation: 1155

This should do it

jQuery('.opn').on('click', function() {
  // I want to Change .opn Class or add some class
  $(this).addClass('smoe-class');

  // I want to toglle ( hide/Show ) <div class="body">
  $(this).parent().next('.body').toggle();
});

jQuery('.del').on('click', function() {
  // I want to delete <li> when click this jQuery('.del');    
  $(this).closest('li.panel').remove();
});

Upvotes: 3

Related Questions