Hey guys, this is simple but I can't make it workn... blah!
I have a UL with many LI. Inside of each LI I have a and two :
<ul开发者_StackOverflow社区>
<li><span>Qualification</span> - <a class="editItem" href="get/14">edit</a> | <a class="deleteItem" href="delete/14">delete</a></li>
</ul>
When I click the delete anchor, I would like to hide the LI. How can I select the LI?
I tried something like this:
$(".deleteItem").click(function(e) {
$(this).parent().find("li").hide();
// or
$(this).prev().prev().prev().hide();
});
But it doesn't work at all. :( What am I doing wrong? Thanks..
To get the LI:
$(".deleteItem").click(function(e) {
$(this).closest("li").hide();
});
.prev()
refers to siblings, in this case <li>
is a parent to the link, .closest()
gets the nearest parent matching the selector.
The li is the parent of the anchor you're clicking, so you could do this:
$(".deleteItem").click(function(e) {
e.preventDefault();
$(this).parent().hide();
});
$(".deleteItem").click(function(e) {
$(this).closest('li').hide();
});
Try that.
should be simply:
$(this).parent().hide();
the LI is the parent of the A element. Others are siblings. Prev is used to find the previous sibling, so it wont give you the parent.
It appears your need to fire off a request to delete the record itself from the database too. So rather than focusing on just hiding the li
, you shouldn't neglect your link's original purpose:
$(".deleteItem").click(function(e){
// prevent page-change
e.preventDefault();
// ask server to delete this record
$.post($(this).attr("href"), function(result){
// remove this record upon server-response
$(e.target).closest("li").slideUp().remove();
});
});
精彩评论