Tengo un ancla y le he adjuntado una devolución de llamada onClick, por lo que una vez que se hace clic, se activa una solicitud AJAX que llama a una vista que elimina la imagen de la base de datos. También debería eliminar <div class="image-preview"> por completo, sin embargo, eso no está sucediendo por alguna razón.

Cuando probé el código de eliminación de div en JSFiddle, funciona. La imagen se elimina con éxito de la base de datos y delete_view participa en el proceso. También he intentado console.log desde dentro de la devolución de llamada exitosa y puedo ver un mensaje de depuración. console.log($(this).parents('.image-preview')); devuelve Object { length: 0, prevObject: Object(1) }, por lo que creo que el selector está fallando.

¿Cuál podría ser la razón?

Html:

<div id="information">
  <div class="image-previews">
    <div class="image-preview">
      <img src="/media/tmp/None/IMG_20190507_144128.jpg" width="80" height="54">
      <p><a id="115" class="delete-temp-image-link">delete</a></p>
      <label><input type="radio" name="main" value="IMG_20190507_144128.jpg">main</label>
    </div>
  </div>
  <div id="div0">
    <div>Name: IMG_20190507_144128.jpg</div>
    <div>Size: 3.03MB</div>
    <div>Type: image/jpeg</div>
    <div class="progressNumber">100%</div>
  </div>
</div>

Jquery:

var $deleteClicked = function(event) {
  var url = Urls.deleteTempImage(event.target.id);

  $.ajax({
    url: url,
    data: {
      'id': event.target.id
    },
    success: function (data) {
      console.log('spam');
      $(this).parents('.image-preview').remove();
    }
  });      
}        

$(document).on('click', '.delete-temp-image-link', $deleteClicked);

Vista:

def delete_view(request, id):
    img = get_object_or_404(TemporaryImage, id=id)
    img.delete()
    return HttpResponse('successfull')
0
adder 7 oct. 2019 a las 01:10

4 respuestas

La mejor respuesta

$(this) no está disponible para su función de devolución de llamada con nombre. Una forma de hacer que su código sea más explícito sería almacenar $(this), como han dicho otros, o simplemente usar el id que ya está pasando de todos modos. Por ejemplo:

var $deleteClicked = function(event) {
  var url = Urls.deleteTempImage(event.target.id);

  $.ajax({
    url: url,
    data: {
      'id': event.target.id
    },
    success: function (data) {
      console.log('spam');
      $("#"+event.target.id).closest('.image-preview').remove();
    }
  });      
}        

$(document).on('click', '.delete-temp-image-link', $deleteClicked);

Además, tenga en cuenta que usé jQuery .closest() en lugar de .parents(). Desde el jQuery docs, .closest() hace lo siguiente:

Para cada elemento del conjunto, obtenga el primer elemento que coincida con el selector probando el elemento en sí y atravesando sus antepasados en el árbol DOM.

Consulte la página de documentos para obtener una descripción de las diferencias entre .closest() y .parents(). La principal diferencia es que .closest() solo atraviesa el árbol DOM hasta que encuentra una coincidencia, en lugar de atravesar todo el camino hasta el elemento raíz. Dudo que haya grandes implicaciones de rendimiento, pero como está seleccionando solo uno <div>, es un código un poco más preciso.

1
faendaro 6 oct. 2019 a las 22:28

Debe almacenar $ (this) antes de ejecutar $ .ajax porque lo está utilizando en un contexto incorrecto.

var $deleteClicked = function(event) {
var url = Urls.deleteTempImage(event.target.id);
var storedThis = $(this);

    $.ajax({
        url: url,
        data: {
            'id': event.target.id
        },
        success: function (data) {
            console.log('spam');
            storedThis.parents('.image-preview').remove();
        }
    });      
}        

$(document).on('click', '.delete-temp-image-link', $deleteClicked);

Esto debería funcionar como se esperaba.

1
Andreas Schmidt 7 oct. 2019 a las 09:03

El mismo problema se me ocurre también. En realidad, '$ (esto)' es complicado como puede parecer.

'$ (this)' no puede usarse en la función de éxito ya que perdió su alcance en la función de éxito. Intente definir '$ (this)' fuera del éxito (es decir, antes de ajax), p. Ej.

elemento const = $ (esto)

Y luego en su función de éxito:

element.parents ('. image-preview'). remove ();

Esto definitivamente debería resolver su problema.

¡Espero que esto ayude!

0
harshit verma 7 oct. 2019 a las 06:19

Pruebe este código para jQuery.

var $deleteClicked = function(event) {
  var url = Urls.deleteTempImage($(this).attr('id'));

  $.ajax({
    url: url,
    data: {
      'id': $(this).attr('id')
    },
    success: function (data) {
      console.log('spam');
      $(this).parents('.image-preview').remove();
    }
  });      
}        

$('.delete-temp-image-link').on('click', $deleteClicked);
0
Cool Dev 6 oct. 2019 a las 22:19
58261615