Retirar elementos individualmente

[carlospc]

Hola a todos y gracias de antemano a quien pueda ayudarme.

Tengo un problema, estoy generando etiquetas para el envío de emails, dentro de un div existen dos divs adicionales, uno que muestra el nombre del destinatario y otro una "equis" para eliminar el contacto de los destinatarios, pero al darle la funcionalidad no puedo eliminar el "parent" solo funciona el primero el cual elimina la lista completa, no solo el elemento deseado. Espero haberme explicado bien...

Especificamente, quiero recrear los destinatarios de envío de mails, estilo outlook, el nuevo gmail, u otros.



Este es el código que estoy empleando:
HTML:

Código HTML:

<div class="contacto" id="mail_1"><div class="nombre">holassss</div><div class="cerrar" id="eliminar">x</div></div>
    <div class="contacto" id="mail_2"><div class="nombre">holassss</div><div class="cerrar" id="eliminar">x</div></div>
    <div class="contacto" id="mail_3"><div class="nombre">holassss</div><div class="cerrar" id="eliminar">x</div></div>
 

JQuery:

Código Javascript:

$(function() {
    $("#eliminar").click(function () {
      $('.cerrar').parent().remove(); 
    });
});