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
}
}
});
});
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();
}
}
});
});