Why doesnt this script remove the parent element
Im not sure why this isn't working, and with my limited jquery abilities I havent been able to located the source of the issue. The script below removes everything instead of just the parent element.
Id appreciate some help with this.
Thanks, Lea
Script:
// Delete post
$('a.delete').livequery("click", function(e){
if(confirm('Are you sure you want to delete this post?')==false)
return false;
e.preventDefault();
var parent = $('a.delete').parent();
var temp = parent.attr('id').replace('record-','');
var main_tr = $('#'+temp).parent();
$.ajax({
type: 'get',
url: 'delete.php?id='+ parent.attr('id').replace('record-',''),
data: '',
beforeSend: function(){
},
success: function(){
parent.fadeOut(200,function(){
main_tr.remove();
});
}
});
});
Markup:
<span id="posting">
<div class="friends_area" id="record-23">
<img src="temp/user_icon.gif" style="width: 50px; height: 48px; float: left;" alt="">
<label style="float: left;" class="name">
<b>99Points</b>
<em>ry ewst yewsrtg eswtg</em>
<br clear="all">
<span style="font-weight: normal;">
9 minutes ago
</span>
<a href="javascript: void(0)" id="post_id23" class="showCommentBox">Comments</a>
</label>
<a style="display: none;" href="#" class="delete"> Remove</a>
<br clear="all">
<div id="CommentPosted23">
</div>
<div class="commentBox" id="commentBox-23" style="display: none;" align="right">
<img src="small.png" class="CommentImg" style="float: left;" alt="" width="40">
<label id="record-23">
<textarea class="commentMark" id="commentMark-23" name="commentMark" cols="60"></textarea>
<div>Write a comment... </div></label>
<br clear="all">
<a id="SubmitComment" class="smallbutton"> Comment</a>
</div>
</div>
<div class="friends_area" id="record-22">
<img src="temp/user_icon.gif" style="width: 50px; height: 48px; float: left;" alt="">
<label style="float: left;" class="name">
<b>99Points</b>
<em>hywr ywerywersywrsey ry r</em>
<br clear="all">
<span style="font-weight: normal;">
9 minutes ago
</span>
<a href="javascript: void(0)" id="post_id22" class="showCommentBox">Comments</a>
</label>
<a style="display: none;" href="#" class="delete"> Remove</a>
<br clear="all">
<div id="CommentPosted22">
</div>
<div class="commentBox" id="commentBox-22" style="display: none;" align="right">
<img src="small.png" class="C开发者_开发技巧ommentImg" style="float: left;" alt="" width="40">
<label id="record-22">
<textarea style="overflow: hidden; color: rgb(51, 51, 51);" class="commentMark" id="commentMark-22" name="commentMark" cols="60"></textarea>
<div style="position: absolute; display: none; font-weight: 400; width: 300px; font-family: monospace; line-height: 14px; font-size: 11px; padding: 0px;">Write a comment... </div></label>
<br clear="all">
<a id="SubmitComment" class="smallbutton"> Comment</a>
</div>
</div>
<div id="bottomMoreButton">
<a id="more_10" class="more_records" href="javascript: void(0)">Older Posts</a>
</div>
</span>
use $(this)
instead of the class selector :). Right now you are removing all of the items with that class.
var parent = $(this).parent();
Also, be wary that you cannot use $(this)
in the ajax call (because it will refer to the ajax call), so you are (accidentally?) doing the right thing by storing it in a variable and the calling .remove()
on it.
精彩评论