2012-06-15 38 views
9

Tengo un DIV que quiero eliminar cuando hago clic en un enlace contenido dentro de ese DIV. Aquí es lo que tengo:Eliminar DIV al hacer clic

<div id="clients-edit-wrapper"> 
    <div class="close-wrapper"> 
     <a href="#" class="close-div">Close</a> 
    </div> 
</div> 

Al hacer clic en "Cerrar" Quiero clients-edit-wrapper a eliminar. Estoy buscando una forma de hacerlo haciendo referencia al DIV principal del enlace Cerrar que, en este caso, es clients-edit-wrapper.

¡Cualquier ayuda sería muy apreciada!


Respuesta de Huangism a continuación:

$('.close-div').click(function(){ 
    $(this).parent().parent().remove(); 
}); 

Esto sólo funciona si el elemento que desea eliminar es de hasta dos padres. En mi caso, esto es exactamente lo que necesitaba.

+0

Su respuesta dependerá de si desea eliminar el div de manera relativa (a través de sus padres o más cercano) o uno absoluto (a través de id). – lucuma

+0

Será de una manera relativa (a través del padre). – FastTrack

+1

En cuanto a la respuesta aceptada. Use 'on()' en su lugar. 'live()' ha quedado en desuso a partir de jQuery 1.7. Si está utilizando jQuery 1.6 y versiones anteriores, use 'delegate()' en lugar de 'live()'. Creo que la razón es principalmente que 'live()' exhibió problemas de memoria. Si usa la versión 1.3 y anteriores, use 'bind()'. 'bind()' se agregó en 1.0, 'live()' en 1.3, 'delegate()' en 1.4.2 y 'on()' en 1.7. – Nope

Respuesta

8

dada su formato HTML

Actualizado a .ON()

$('.close-div').on('click', function(){ 
    $(this).parent().parent().remove(); 
}); 

utilizar realmente el más próximo() método, es más fiable y mejor la lógica. Con eso se puede envolver más para cerrar-div y no importaría

De la respuesta de Visión

$(this).closest("#clients-edit-wrapper").remove(); 

más flexibilidad

Editar
(Añadido recursos relacionados)
Por favor, vea jQuery documentación en live()

A partir de jQuery 1.7, el método .live() es obsoleto. Utilice .on() para adjuntar controladores de eventos. Los usuarios de versiones anteriores de jQuery deben usar .delegate() con preferencia a .live().

Por lo que sé, esto se debe a problemas de memoria/problemas con live().

+0

Esto es exactamente lo que estaba buscando. Gracias Huangism! Aceptaré como la respuesta correcta en 5 min. – FastTrack

+0

@FastTrack debe usar el más cercano como en la respuesta de Vision, es mejor lógicamente, más flexible – Huangism

+0

Huangismo: Pero si tuviera que usar la solución de Vision, tendría que poner varias instancias de '$ (this) .closest (" # clientes -edit-wrapper "). remove();' para cada DIV que tenga un enlace '.close-div'. – FastTrack

1
$('#clients-edit-wrapper').find('.close-div').click(function(){ 
    $('#clients-edit-wrapper').remove(); 
}); 
8

Aquí es una solución:

$(".close-div").on("click", function(event) { 
    $("#clients-edit-wrapper").remove(); 
    event.preventDefault(); 
}); 

Para obtener #clients-edit-wrapper elemento relativamente a .close-div elemento, puede utilizar cualquiera parent().parent() o closest con ID:

$(this).parent().parent().remove();     // will do 
$(this).closest("#clients-edit-wrapper").remove(); // the same 

Sin embargo, el último doesn No tiene sentido, ya que los ID de los elementos de página deben ser únicos, y no habrá otro #clients-edit-wrapper.

1

También puede usar closest.

$('.close-div').on('click', function(e) { 
    e.preventDefault(); 
    $('#clients-edit-wrapper').remove(); 
}); 
2
$(".close-div").click(function(){ 

    $("#clients-edit-wrapper").remove(); 

}); 
1

Dado que se basa el elemento de la matriz, me animo evento de delegación:

$("#clients-edit-wrapper").on("click", ".close-div", function(e){ 
    e.preventDefault(); 
    $(e.delegateTarget).remove(); 
}); 
1
<div id="clients-edit-wrapper"> 
    <div class="close-wrapper"> 
     <a href="#" onclick="$('#clients-edit-wrapper').remove();" class="close-div">Close</a> 
    </div> 
</div> 
+1

¿Quién y por qué le dio al hombre -1? [Aquí está jsfiddle que muestra que funciona de la manera requerida.] (Http://jsfiddle.net/Nz2JK/) +1 de mí. – Boro

+3

No voté en esta respuesta, sin embargo, la práctica de combinar JavaScript con Markup está mal visto. Hace código difícil de administrar. Es mejor hacer todos los enlaces desde JavaScript y no desde atributos como 'onclick'. – Sampson

+0

Buena respuesta. Escribir código en marcado es útil en situaciones como estas, donde no se necesita mucho. –

Cuestiones relacionadas