CODEWITHSUNDEEP
javascriptjqueryhtmlparent
Scooter Daraf
Scooter Daraf

Reputation: 535

Get parent of the parent of div

I have searched and tried many things to do this such as closest() and parents() and parent() and find() But i couldnt make it to work at all .

I have this html

<div  class='message_holder area2 user45 chatid32'>
    <a class='avatar' title='jhon'>
       <img height='28px' width = '28px' src="link to image" />
    </a>
 <div class='flag_holder'>
    <div class='edited  png32'></div>
    <div class='  png32'></div>
 </div>
 <div class='message user_chat'> hghgghgh</div>
 <div class='like_holder'>
    <div class='chattime'>02-12 22:16</div>
    <div class='likepng'></div>
    <div class='likescore'>5</div>
    <div class='unlikescore'>0</div>
    <div class='unlikepng'></div>
    <div class="like">
        <div class="editpng"></div>
        <div class="deletepng"></div>
    </div>
 </div>
</div>

So what i want is when i click on on div class deletepng i want to remove the two divs unlikepng and likepng .

this js

 $(document).on ("click", ".deletepng", function () {
      $this = $(this);
     //alert( $this.closest(".like").html());  I could just make this to work
     // alert( $this.parents(".like_holder").html());  wont work
     // alert( $this.closest(".like_holder").html());  wont work
     // alert( $this.parent().parent().html());  wont work
     // alert( $this.closest(".like_holder").find(".like_holder").html()); wont work
 });

I just wonder why they dont work those my trying . Where it can be my mistake ?

EDIT:

i dont know if this have a role or not , i have what i tried inside Dialog box like that

 $(document).on ("click", ".deletepng", function () { 
 $this = $(this);
 $('<div>' + c_delete + '</div>').dialog({
  resizable: false,
  buttons: {
    "Yes": function() {
      chat_text_h.html('<div class="removed"> Removed</div>'); // do something here
      $(this).dialog("close");

      //alert( $this.closest(".like").html());  I could just make this to work
      // alert( $this.parents(".like_holder").html());  wont work
      // alert( $this.closest(".like_holder").html());  wont work
      // alert( $this.parent().parent().html());  wont work
      // alert( $this.closest(".like_holder").find(".like_holder").html()); wont work
    }
  }
});
});

Upvotes: 2

Views: 147

Answers (5)

BenG
BenG

Reputation: 15154

use closest then use the second argument as the context.

$(document).on("click", ".deletepng", function() {
  var $holder = $(this).closest('.like_holder');
  $('.likepng, .unlikepng', $holder).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='message_holder area2 user45 chatid32'>
  <a class='avatar' title='jhon'>
    <img height='28px' width='28px' src="link to image" />
  </a>
  <div class='flag_holder'>
    <div class='edited  png32'></div>
    <div class='  png32'></div>
  </div>
  <div class='message user_chat'>hghgghgh</div>
  <div class='like_holder'>
    <div class='chattime'>02-12 22:16</div>
    <div class='likepng'>like</div>
    <div class='likescore'>5</div>
    <div class='unlikescore'>0</div>
    <div class='unlikepng'>unlike</div>
    <div class="like">
      <div class="editpng"></div>
      <div class="deletepng">delete</div>
    </div>
  </div>
</div>

EDIT

Since your update, you need to set a global variable to remember $this or the container/holder. try this:-

var $holder;

$(document).on("click", ".deletepng", function() {

  $holder = $(this).closest('.like_holder');

  $('<div>' + c_delete + '</div>').dialog({
    resizable: false,
    buttons: {
      "Yes": function() {
        chat_text_h.html('<div class="removed"> Removed</div>');
        $(this).dialog("close");

        $('.likepng, .unlikepng', $holder).remove();
      }
    }
  });
});

Upvotes: 2

xAqweRx
xAqweRx

Reputation: 1236

$this.closest(".like").html(); => this will return HTML of parent div, where delete button is. Not removing the element

$this.parents(".like_holder").html() => this will return html of div.message_holder. Not removing the element.

$this.closest(".like_holder").html() => this will return html of div.like_holder $this.parent().parent().html(); close enogh, but still far => html of div.like_holder $this.closest(".like_holder").find(".like_holder").html(); return null => no child element with class like_holder in div.like_holder.

Kind of example

$(document).on ("click", ".deletepng", function () {
      var $parent = $(this).parent().parent();
       $parent.find('.likepng').remove();
       $parent.find('.unlikepng').remove();
     
 });
.deletepng{
    background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div  class='message_holder area2 user45 chatid32'>
    <a class='avatar' title='jhon'>
       <img height='28px' width = '28px' src="http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg" />
    </a>
 <div class='flag_holder'>
    <div class='edited  png32'></div>
    <div class='  png32'></div>
 </div>
 <div class='message user_chat'> hghgghgh</div>
 <div class='like_holder'>
    <div class='chattime'>02-12 22:16</div>
    <div class='likepng'> like me</div>
    <div class='likescore'>5</div>
    <div class='unlikescore'>0</div>
    <div class='unlikepng'> unlike me</div>
    <div class="like">
        <div class="editpng"></div>
        <div class="deletepng">delete button</div>
    </div>
 </div>
</div>

UPDATE

If you want to make it from dialog box, or other things - you can't use this variable. This is not making any sense. You should provide unique id to your message_box and then use it, like $(id_of_message_box).find('.likepng, .unlikepng').remove()

or as I can see from your code: 

   var $parent = $this.parent().parent();
       $parent.find('.likepng, .unlikepng').remove();

It means you should use $this in your function instead of $(this)

Upvotes: 1

Anil
Anil

Reputation: 3752

Try this, you need sibling of parent;

alert( $this.closest(".like").parent().find(".unlikescore").html()); 
alert ($this.closest('.like').siblings('.unlikepng').html()) ;

working js fiddle

Upvotes: 0

Vladimir Drenovski
Vladimir Drenovski

Reputation: 300

In order to select the parent of a parent of an element you try this:

$(document).on ("click", ".deletepng", function () {


     alert( $($(this).parent()).parent().html());

 });

Since you can only execute the parent() method on Jquery Objects. Here's an example unrelated to your code. JSFiddle.

Upvotes: 0

ExohJosh
ExohJosh

Reputation: 1892

You can access the parents parent of your $(this) like:

var likeholder;

likeholder = $(this).parent().parent();

However this is generally ill advised. You'll have a jquery object though.

Let me know how you get on

Upvotes: 0

Related Questions