Question

我有一些使用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 %}

这是我拥有的脚本，它获取父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!");
            }

        }
    })
})
})

然而，即使成功弹出窗口显示，div也不会被删除。

感谢您的帮助！

Answer 1

您需要使用{ "name": "react-app", "version": "0.1.0", "private": false, "devDependencies": { "npm-watch": "^0.1.8", "react-scripts": "0.9.5", }, "dependencies": { "react": "^15.4.2", "react-dom": "^15.4.2" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject", "watch": "npm-watch" //add this to the script }, "watch": { //add this outside the script "build": "src/" } }将#用作选择器。

id

或者我建议的更好的方法是将var div_id = "#"+id + "_div"; // Use # here var parent_div = $(div_id); parent_div.remove();存储在div内的某个变量中，然后再使用它。

.click

Answer 2

请尝试这样

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

.remove（）在成功函数上不使用ajax

2 个答案: