Chiarissimo.
Come detto sopra, puoi usare .attr('id'); dentro la funzione del click potresti fare una cosa del genere:
codice:
$('.contenitore_ricetta .rimuovi').click(function(){
var idElementoRimosso = $(this).closest('.contenitore_ricetta').remove().attr('id');
console.log(idElementoRimosso);
});
.
In questo modo la variabile idElementoRimosso riceverà il valore dell'id di quell'elemento che stai rimuovendo.
La riga successiva console.log(idElementoRimosso); chiaramente serve solo a verificare, nella console del tuo browser, il corretto funzionamento.
Qui l'esempio completo:
codice:
<!DOCTYPE HTML>
<html lang="it">
<head>
<title>Esempio</title>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script>
$(function(){
$('.contenitore_ricetta .rimuovi').click(function(){
var idElementoRimosso = $(this).closest('.contenitore_ricetta').remove().attr('id');
console.log(idElementoRimosso);
});
});
</script>
<style>
.contenitore_ricetta {
width: 500px;
background: tan;
margin-bottom: 10px;
overflow: auto;
}
.contenitore_ricetta .rimuovi {
float: right;
cursor: pointer;
}
.rimuovi > .fa-close {
font-size: 16px;
color: red;
}
</style>
</head>
<body>
<div class="contenitore_ricetta" id="contenitore_1">
Contenitore 1
<button class="rimuovi"><i class="fa fa-close"></i></button>
</div>
<div class="contenitore_ricetta" id="contenitore_2">
Contenitore 2
<button class="rimuovi"><i class="fa fa-close"></i></button>
</div>
<div class="contenitore_ricetta" id="contenitore_3">
Contenitore 3
<button class="rimuovi"><i class="fa fa-close"></i></button>
</div>
<div class="contenitore_ricetta" id="contenitore_4">
Contenitore 4
<button class="rimuovi"><i class="fa fa-close"></i></button>
</div>
</body>
</html>