javascript AJAX 隐藏删除的元素(对象)

vhipe2zx  于 2023-02-28  发布在  Java
关注(0)|答案(3)|浏览(125)

学习Django,但找不到解决方案。如何隐藏页面上已删除的对象。
超文本标记语言

{% 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 %}

日本

$(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(){}中输入什么才能使远程地址在按钮被单击后消失,而不刷新页面?

js4nwp54

js4nwp541#

您可以使用.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();
        }
    });
})
wlzqhblo

wlzqhblo2#

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

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

tsm1rwdh3#

你需要修改它

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

因为“_vm”不对应于jquery对象

相关问题