简体   繁体   English

.remove()在成功函数上不使用ajax

[英].remove() not working with ajax on success function

I have some html divs that are generated using jinja2 with this: 我有一些使用jinja2生成的html div:

{% for student in students %}
<div class="item" id="{{ student.id }}_div">
   <div class="right floated content">
      <div class="negative ui button compact remove_from_class" id="{{ student.id }}">Remove from Class</div>
   </div>
   <i class="large user icon middle aligned icon"></i>
   <div class="content">
      <div class="header">
         <h3><u>{{ student.get_full_name }}</u></h3>
      </div>
      <div class="description">{{ student.email }}</div>
   </div>
</div>
{% endfor %}

This is the script I have for it which gets the parent divs id, and then tries to remove it using .remove(). 这是我拥有的脚本,它获取父divs id,然后尝试使用.remove()删除它。

$(".remove_from_class").each(function () {
$(this).on("click", function () {
    var id = this.id;
    var url = window.location.pathname.split('/');
    var set_id = url.pop() || url.pop()


    $.ajax({
        method: 'POST',
        url: '/ajax/delete_from_class/',
        data: {
            'id': id,
            'set_id': set_id,
        },
        dataType: 'json',
        success: function (data) {
            if (data.success == true) {
                var div_id = id + "_div";
                var parent_div = $(div_id);
                parent_div.remove();

            } else {
                alert("Student wasn't removed!");
            }

        }
    })
})
})

However the div isnt being removed, even though the success popup appears. 但是,即使出现成功弹出窗口,div也不会被删除。

Thanks for any help! 谢谢你的帮助!

You need to use # to use id as a selector. 您需要使用#来使用id作为选择器。

var div_id = "#"+id + "_div"; // Use # here
var parent_div = $(div_id);
parent_div.remove();

Or the better approach I would suggest here is to store div inside .click in some variable and then later use that. 或者我建议的更好的方法是将div存储在.click中的某个变量中,然后再使用它。

$(".remove_from_class").each(function () {
$(this).on("click", function () {
    var $parentDiv = $(this).closest(".item"); // Save it here
    var id = this.id;
    var url = window.location.pathname.split('/');
    var set_id = url.pop() || url.pop()


    $.ajax({
        method: 'POST',
        url: '/ajax/delete_from_class/',
        data: {
            'id': id,
            'set_id': set_id,
        },
        dataType: 'json',
        success: function (data) {
            if (data.success == true) {
                $parentDiv.remove(); // And remvoe it here

            } else {
                alert("Student wasn't removed!");
            }

        }
    })
})
})

请尝试这样

$('#'+ id +'_div').remove();

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM