Question 11065 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Ajax hide deleted element(object) – Jquery

Learning Django and can’t find solution. How hide deleted object on page.

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
})

What I must put in success:function(){} to make the remote address disappear after the button is clicked, without page refresh?

Tags:

3

Answers


  1. 0

    .remove() will work. You have to select the right dom element.

      success:function(){
                $("_aId").remove();
            }
    Login or Signup to reply.
  2. 0

    you need modify it

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

    Because "_vm" does not correspond to a jquery object

    Login or Signup to reply.
  3. 0

    You can use .closest() to target the .card, .parent to target the .col-md-4 and finally .remove to remove it from the DOM.

    Change the javascript part to something like this

    $(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();
        }
    });
})
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search