Azione non compiuta

Buongiorno

in una struttura dove mostro una serie di immagini e ognuna di esse è impostata con una struttura simile

Codice HTML:

---

<div class="contenitore">
  <img src=... />
  <div class="azione"></div>
</div>

---

Quando si posiziona il mouse sopra viene reso visibile il div interno che copre per intero l'immagine. Al click su di essa parte una richiesta AJAX e al termine della stessa, se tutto è andato a buon fine, vorrei che venisse eliminato l'intero div contenitore.
Ora se faccio così

Codice:

---

$('#contenitore div').click(function(){
  var elem = $(this).parent();
  elem.remove();
});

---

funziona e il div viene eliminato.

Se invece proseguo con la chiamata ajax così

Codice:

---

$('#contenitore div').click(function(){
  var elem = $(this).parent();
 
  $.ajax({
      [...]
      success: function(data) {
        if(data == 'OK') {
            elem.remove();
        }
  });

---

Pur essendosi correttamente conclusa la chiamata AJAX, l'elemento non viene eliminato.

Suggerimenti?

Forse la variabile data non è "OK"? magari è minuscola... prova a fare

Codice HTML:

---

$.ajax({
      [...]
      success: function(data) {
            alert(data);

        if(data == 'OK') {
            elem.remove();
        }
  });

---

e vedi che ti restituisce

Scusa, non ho poi aggiornato.
Ho risolto.

Il problema era nel riferimento all'elemento che veniva perso dopo la chiamata ajax.
Ho spostato lo scope della variabile da locale a globale e adesso funziona tutto a dovere.

Grazie.