jQuery parents() 选择器失败

Question

I have an anchor, and I have attached an onClick callback to it, so once it is clicked, an AJAX request is fired which calls a view that deletes the image from the database. It should also remove <div class="image-preview"> altogether, too, however that is not happening for some reason.

When I tested div removal code in JSFiddle , it works. The image is successfully getting removed from the database and delete_view is involved in the process. I have also tried to console.log from inside the success callback and I can see a debug message. console.log($(this).parents('.image-preview')); returns Object { length: 0, prevObject: Object(1) } , thus I think the selector is failing.

What could be the reason?

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

view:

def delete_view(request, id):
    img = get_object_or_404(TemporaryImage, id=id)
    img.delete()
    return HttpResponse('successfull')

Answer 1

You have to store $(this) before run $.ajax because you are using it in a wrong context.

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

This should work as expected.

Answer 2

$(this) isn't available to your named click callback function. One way to make your code more explicit would be to store $(this) , as others have said - or, simply use the id that you're already passing anyway. For example:

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

Also, note that I used jQuery .closest() instead of .parents() . From the jQuery docs , .closest() does the following:

For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

Check out the docs page for a description of the differences between .closest() and .parents() . The main difference is that .closest() only traverses up the DOM tree until it finds a match, rather than traversing all the way up to the root element. I doubt there are huge performance implications, but since you're selecting only one <div> , it's slightly more precise code.

Answer 3

Try this code for 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);

Answer 4

Same problem occur to me as well. Actually '$(this)' is tricky as it may seem.

'$(this)' cannot be used in success function as it lost it scope in success function. Try to define '$(this)' outside the success(ie, before ajax),eg

const element = $(this)

And then in your success function:

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

This should definitely solve your problem.

Hope this helps!