Javascript onclick ocultar div

Quiero ocultar este div de advertencia utilizando javascript dentro de él.Javascript onclick ocultar div

¿Estoy obteniendo el javascript correcto? Quiero ocultar/cerrar la div cuando hago clic en el icono de cierre (imágenes/close_icon.gif)

<div> 
    <strong>Warning:</strong> 
    These are new products 
    <a href='#' class='close_notification' title='Click to Close'> 
    <img src="images/close_icon.gif" width="6" height="6" alt="Close" onClick="this.close" /> 
    </a 
</div>

Fuente

2011-04-01 karto

Cómo se utiliza una biblioteca como jQuery o Javascript en bruto? – alexl

Si desea cerrarla usted puede ocultarlo o eliminarlo de la página. Para ocultarlo que haría algo de JavaScript como:

this.parentNode.style.display = 'none';

para quitarlo utiliza removeChild

this.parentNode.parentNode.removeChild(this.parentNode);

Si había una biblioteca como jQuery incluido a continuación, ocultar o eliminar el div sería un poco más fácil:

$(this).parent().hide(); 
$(this).parent().remove();

otra cosa, como su img es un ancla en el evento onclick en el anclaje va a disparar también. Como href está establecido en #, la página se desplazará de nuevo a la parte superior de la página. En general, es una buena práctica que si se desea un enlace para hacer algo más que ir a su href se debe configurar el evento onclick a return false;

Fuente

2011-04-01 15:37:43

+1, pero tiene el 'onclick' en' img', no 'a', por lo que sería' this.parentNode.parentNode.style.display = 'none'; 'y similarmente' this.parentNode. parentNode.parentNode.removeChild (this.parentNode.parentNode); '. A menos que recomiendes moverlo. :-) –

De acuerdo, leí mal la pregunta antes de que fuera editada. Sería mejor si el evento estuviera en el ancla de todos modos. –

De acuerdo, eso es lo que recomendé también. –

sólo tiene que añadir onclick para la etiqueta de anclaje

onclick="this.parentNode.style.display = 'none'"

o cambiar onclick manejador para la etiqueta img

onclick="this.parentNode.parentNode.style.display = 'none'"

Fuente

2011-04-01 15:37:43 Andrei

HTML

<div id='hideme'><strong>Warning:</strong>These are new products<a href='#' class='close_notification' title='Click to Close'><img src="images/close_icon.gif" width="6" height="6" alt="Close" onClick="hide('hideme')" /></a

Javascript:

function hide(obj) { 

    var el = document.getElementById(obj); 

     el.style.display = 'none'; 

}

Fuente

2011-04-01 15:39:23

gracias amigo. esto funcionó también – karto

Hola, Chris. Gracias por esto. Aunque tengo una consulta, ¿hay alguna manera de agregarle un "efecto de transición"?Por transición, quiero decir, el div 'hideme' se cerrará en un estilo lineal durante 2 segundos, algo así. ¡Gracias de nuevo! –

Claro, puedes configurar el elemento para que se desborde: oculto usando javascript, y luego usando timeouts o setinterval, puedes disminuir la altura del div hasta que llegue a 0. Sin embargo, este efecto sería mucho más fácil con JQuery .animate() –

simple & mejor manera:

onclick="parentNode.remove()"

Borra la matriz completa de HTML

Fuente

2013-09-27 16:24:33

Respuesta

Cuestiones relacionadas