Я пытаюсь удалить div после удаления ссылки на этот div. Дивы генерируются с помощью добавления после загрузки веб-сайта.
Добавлен HTML:
<div class="reviews">
<div class="row-fluid" id="57">
<div class="span2">
<img src="img/default_male.png" alt="Male Default Photo">
</div>
<div class="span10">
<h6>Test Test</h6>
<img class="rating-stars" src="img/2star.png" alt="2 Stars">
<br>
<p class="comment-info">
<time class="timeago" datetime="2013-09-19 22:49:59" title="Thursday, Sep 19, 2013 - 10:49 PM">5 minutes ago</time>,
<a href="#removereview" class="removereview">remove</a>
</p>
</div>
</div>
Мой код JQuery:
$(".reviews").on('click', '.removereview', function() {
var review_id = $(this).parents('.row-fluid').attr('id');
console.log(review_id);
$.ajax({
type: "POST",
url: "event_send.php",
data: "func=remove_review&post_id=" + review_id + "&event_name=" + getUrlVars()["event_name"],
success: function(response){
$(".review-count").html(parseInt($(".review-count").html()) - 1);
$(this).closest('.row-fluid').remove();
}
});
return false;
});
Проблема в том, что div не удаляется, хотя правильный код выбирается кодом. Любые идеи по устранению проблемы?
спасибо
this
внутри обработчика успеха не ссылается на элемент с $(this).closest('.row-fluid')
поэтому ваш селектор $(this).closest('.row-fluid')
не может найти элемент.
Одним из решений является использование переменной замыкания self
которая затем будет использоваться внутри обработчика успеха
$(".reviews").on('click', '.removereview', function() {
var review_id = $(this).parents('.row-fluid').attr('id');
console.log(review_id);
var self = this;
$.ajax({
type: "POST",
url: "event_send.php",
data: "func=remove_review&post_id=" + review_id + "&event_name=" + getUrlVars()["event_name"],
success: function(response){
$(".review-count").html(parseInt($(".review-count").html()) - 1);
$(self).closest('.row-fluid').remove();
}
});
return false;
});
Другим является использование $.proxy() для передачи настраиваемого контекста для обратного вызова успеха
$(".reviews").on('click', '.removereview', function() {
var review_id = $(this).parents('.row-fluid').attr('id');
console.log(review_id);
$.ajax({
type: "POST",
url: "event_send.php",
data: "func=remove_review&post_id=" + review_id + "&event_name=" + getUrlVars()["event_name"],
success: $.proxy(function(response){
$(".review-count").html(parseInt($(".review-count").html()) - 1);
$(this).closest('.row-fluid').remove();
}, this)
});
return false;
});
Я считаю, что вы пытаетесь удалить элемент, который вы получили в review_id
; Почему бы не удалить его напрямую?
$('#'+review_id).remove();
исправьте меня, если я неправильно понял ваш вопрос.