recuperar id del elemento con JQuery

[truman_truman]

Hola Alguien me podría enseñar como hago para saber el id del div que deseo eliminar , donde dice "#id_XXX" debería decir el id del div en cuestión

Código Javascript:

$(".eliminar").click(function(){
            $("#id_XXX").remove();
            })
 

Código HTML:

<div id="uno">1</div>        
<div id="dos">2</div>        
<div id="tres">3</div>        
<div id="cuatro">4</div> 

       
   <a href="#"  class="eliminar">Eliminar div 1</a>         
   <a href="#"  class="eliminar">Eliminar div 2</a>         
   <a href="#"  class="eliminar">Eliminar div 3</a>         
   <a href="#"  class="eliminar">Eliminar div 4</a> 

Gracias

[newboy_master]

Primero te pongo una solución alternativa usando una pequeña función:

Código Javascript:

function elimDiv(id) {
    $("#"+id).remove();
}
 

Código HTML:

<div id="uno">1</div>        
<div id="dos">2</div>        
<div id="tres">3</div>        
<div id="cuatro">4</div> 
       
<a href="#"  class="eliminar" onclick="elimDiv('uno'); return false">Eliminar div 1</a>         
<a href="#"  class="eliminar" onclick="elimDiv('dos'); return false">Eliminar div 2</a>         
<a href="#"  class="eliminar" onclick="elimDiv('tres'); return false">Eliminar div 3</a>         
<a href="#"  class="eliminar" onclick="elimDiv('cuatro'); return false">Eliminar div 4</a>
 

Y ahora una solución que a lo mejor te interesa más:

Código Javascript:

$(document).ready( function(){
 
    $(".eliminar").click(function(){
        var div = $(this).attr("rel");                        
        $("#"+div).remove();
    })
 
});
 

Código HTML:

<div id="uno">1</div>        
<div id="dos">2</div>        
<div id="tres">3</div>        
<div id="cuatro">4</div> 
       
<a href="#"  class="eliminar" rel="uno">Eliminar div 1</a>         
<a href="#"  class="eliminar" rel="dos">Eliminar div 2</a>         
<a href="#"  class="eliminar" rel="tres">Eliminar div 3</a>         
<a href="#"  class="eliminar" rel="cuatro">Eliminar div 4</a>
 

Hay muchas opciones, es cuestión de pensar cuál es la mejor. No sé si será realmente correcto usar el atributo "rel" para ese fin pero ayuda con tu problema.

Salu2.

[truman_truman]

Ah pero entonces si yo le pusiera un id al link así:

<a href="#" id="id_1" class="eliminar" rel="uno">Eliminar div 1</a>

y un id a los div así:

<div id="uno_id_1">1</div>


podría acceder al id asií?


var div = $(this).attr("id");
$("#div_"+div).remove();

[newboy_master]

Si quieres usar ids sería así:

var div = $(this).attr("id");
$("div#"+div).remove();

<div id="id_1">1</div>
<a href="#" id="id_1" class="eliminar">Eliminar div 1</a>

Haciendo que coincidan, a no ser que quieras seguir un patron, como un inicio común o algo. El ejemplo que me has puesto no funcionaría.

Primero por que no coincide el ID del enlace con el del div, y segundo por que el selector en jQuery lo has puesto mal, en tu caso seleccionas un elemento con el id #div_[lo_que_valga_id] y no tienes ningún div que coincida.

Salu2.

[truman_truman]

Ok me equivoqué al escribir pero la idea es esa.

Ahora tengo otro problema, resulta que estos links para Elimiar los creo dinamicamente también con jQuery, pero al presionarlos no hacen nada, pero si lo escribo a mano el el código si funciona.
Hay alguna razon por la que los links o botones generados dinamicamente con jQuery no realicen la llamada a la función??????

[newboy_master]

Se me ocurre que primero tengas declarada la función manejadora del evento "click" y luego los generes, entonces no se reconoce.

Tienen que generarse los enlaces y luego la función "click". Si no es eso publica el código y lo reviso.

Salu2.

[truman_truman]

Ok pongo el código a ver si podés encontrar el error

Desde ya muchas gracias:

Código Javascript:

<script type="text/javascript" src="lib/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        var contador = 1;
        $(".eliminar").click(function(){
            //$("#id_"+$(this).attr("id")).remove();
            alert("hola"+$(this).attr("id"));
            
        })
        
        
        $("#agregar").click(function(){
        
        
 
            $("#contactos_div").append("<div id='id_id_"+contador+"' > <a href='javascript:void(0);' id='id_"+contador+"' class='eliminar'>este no funciona</a></div>"),contador++
            
        })          
})
</script>
 

Código HTML:

<a href="javascript:void(0);" id="agregar" style="text-decoration:none">Agregar</a>
<div id='id_id_1' ><a href='javascript:void(0);'id='id_1'  class='eliminar'>Este funciona</a></div>
<div id="contactos_div"></div> 

[newboy_master]

El problema ahí es que dices "en cuanto cargue la página, al pinchar en los elementos con la clase eliminar que muestre una alerta", y no existen elementos que cumplan ese requisito ya que se generan dinámicamente.

Prueba a ponerlo así:

Código Javascript:

$(".eliminar").live('click', function(e){
            //$("#id_"+$(this).attr("id")).remove();
            alert("hola"+$(this).attr("id"));
})
 

Salu2.

[truman_truman]

Impecable! ahora funciona de lujo, pero me surgen preguntas, como por ejemplo que es el parametro e en la funcion

function(e)

y otra pregunta que imagino su respuesta
que hace el método .live
supongo que hace que funcionen los elementos que se vallan creando en vivo y en directo jeje, no?

[newboy_master]

Lo puedes quitar, se me ha pasado, sirve para manejar un evento, si luego se usa por ejemplo: e.preventDefault(); se evitaría ejecutar la acción por defecto de los elementos seleccionados.

http://api.jquery.com/event.preventDefault/

live() te permite seleccionar elementos de ahora y el futuro, por lo que reconoce los elementos generadores posteriormente a la carga de la página.

Leyendo un artículo he visto que se recomienda usar .delegate() en vez de .live() asi que mejor déjalo de esta forma:

Código Javascript:

$("#contactos_div").delegate('.eliminar','click', function(){
    //$("#id_"+$(this).attr("id")).remove();
    alert("hola"+$(this).attr("id"));
})
 

Y aquí el artículo citado:
http://www.etnassoft.com/2011/05/12/...a-jquery-live/

Salu2.

[truman_truman]

Ok, funciona perfecto,y si, yo también había oído hablar de delegate, pero como recién empiezo con esto de jQuery me está costando un poco., soy más del php que del javascript jeje.
Te agradezco mucho tu ayuda y tus explicaciones tan bien planteadas.

Saludos
Suerte