Ajax 隐藏删除的元素（对象）

Question

学习Django 找不到解决办法。如何在页面上隐藏已删除的对象。

html

{% extends 'base.html' %}
{% load static %}
{% block content %}
<main class="container my-4">
    <h3 class="my-4 border-bottom pb-1">Адреса <a href="{% url 'add_address' %}" class="float-right btn btn-sm btn-success"><i class="fa fa-plus">  Add address</i></a></h3>
    <div class="row">
        <div class="col-md-3">
            {% include 'user/user-sidebar.html' %}
        </div>
        <div class="col-md-9">
            <div class="row">
                {% for add in addbook %}
                <div class="col-md-4">
                    <div class="card mb-3 {% if add.status %}border-secondary shadow{% endif %} address{{add.id}} address">
                        <div class="card-body">
                            <p class="box-element">{{add.address}}</p>
                            <p class="card-text">{{add.mobile}}</p>
                        </div>
                        {% if add.status %}
                        <div class="card-footer">
                            <i class="fa fa-check-circle text-success check{{add.id}} check"></i>
                            <button data-address="{{add.id}}" class="btn btn-sm btn-info activate-address btn{{add.id}} actbtn" style="display:none;" >Activate</button>
                            <button data-address="{{add.id}}" class="btn btn-sm btn-danger delete-address"><i class="fa fa-trash"></i></button>
                            <a href="{% url 'update-address' add.id %}" class="float-right"><i class="fa fa-edit"></i></a>
                        </div>
                        {% else %}
                        <div class="card-footer footer{{add.id}}">
                            <i style="display:none;" class="fa fa-check-circle text-success check{{add.id}} check"></i>
                            <button data-address="{{add.id}}" class="btn btn-sm btn-info activate-address btn{{add.id}} actbtn">Activate</button>
                            <button data-address="{{add.id}}" class="btn btn-sm btn-danger delete-address"><i class="fa fa-trash"></i></button>
                            <a href="{% url 'update-address' add.id %}" class="float-right"><i class="fa fa-edit"></i></a>
                        </div>
                        {% endif %}
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</main>
{% endblock %}

js

$(document).on('click','.delete-address',function(){
    var _aId=$(this).attr('data-address');
    var _vm=$(this);
    // Ajax
    $.ajax({
        url:'/delete-address',
        data:{
            'id':_aId,
        },
        dataType:'json',
        beforeSend:function (){
            _vm.attr('disabled', true)
        },
        success:function(){
            $("_aId").hide();
        }
    });
    // End
})

我必须在

success:function(){}

中输入什么才能使远程地址在单击按钮后消失，无需刷新页面？

Answer 1

您可以使用

.closest()

来定位

.card

，

.parent

来定位

.col-md-4

，最后使用

.remove

将其从DOM中删除。

将 javascript 部分改成这样

$(document).on('click','.delete-address',function(){
    var _aId=$(this).attr('data-address');
    var _vm=$(this).attr('disabled', true);
    // Ajax
    $.ajax({
        url:'/delete-address',
        data:{
            'id':_aId,
        },
        dataType:'json',
        success:function(){
            _vm.closest('.card').parent().remove();
        }
    });
})

Answer 2

.remove() 会起作用。你必须选择正确的 dom 元素。

  success:function(){
                $("_aId").remove();
            }

Answer 3

你需要修改它

beforeSend:function (){
   //_vm.attr('disabled', true)
   $(_vm).attr('disabled', true)
},

因为“_vm”不对应一个jquery对象