Onclick Javascript nascondere il div

Voglio nascondi questo avviso div utilizzando javascript all’interno di esso.

Io sono sempre il diritto di javascript? Voglio nascondere/chiudere il div quando clicco sull’icona di chiusura images/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>
  • usare una libreria come jquery o di materie prime javascript ?
InformationsquelleAutor karto | 2011-04-01



4 Replies
  1. 49

    Se volete chiudere è possibile nascondere o rimuovere dalla pagina. Per nascondere che si dovrebbe fare un po ‘ di javascript come:

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

    Per rimuoverlo si utilizza removeChild

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

    Se tu avessi una libreria jQuery incluso per poi nascondere o rimuovere il div sarebbe un po ‘ più facile:

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

    Un altra cosa, come img è un’ancora per l’evento onclick su l’ancora sta andando a fuoco pure. Come href è impostato su # poi la pagina si scorrere la parte superiore della pagina. In generale è buona pratica che se si desidera un collegamento a fare qualcosa di diverso vai al suo href è necessario impostare l’evento onclick per return false;

    • +1, ma ha la onclick sul img, non a, in modo che sarebbe this.parentNode.parentNode.style.display = 'none'; e allo stesso modo this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);. A meno che non si consiglia di spostarla. 🙂
    • Fair punto, ho letto male la domanda prima è stato modificato. Sarebbe meglio se l’evento è stato l’ancora comunque.
    • Concordato, che è quello che ho consigliato anche.
    • Grazie laurencek. ha funzionato bene. mi ha salvato un sacco di tempo.
    • Se vi state chiedendo, si può anche scoprire?) l’elemento nuovo utilizzando this.parentNode.style.display = 'block';
    • o da this.parentNode.style.display = '' che renderà il browser utilizzato il valore originale per la proprietà display.
    • Non utilizzare jQuery #hide e #remove funzioni. La performance è terribile, vedere github.com/jquery/jquery.com/issues/88#issuecomment-72400007

  2. 13

    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';
    
    }
    • Ciao, Chris. Grazie per questo. Ho una domanda però, c’è un modo per aggiungere un effetto di transizione” ad esso? Da transizione, voglio dire, il “hideme’ div si chiude in uno stile lineare, per 2 secondi, qualcosa di simile. Grazie ancora!
    • Certo, si potrebbe impostare l’elemento overflow:hidden utilizzando javascript, e quindi utilizzando i timeout o setinterval, si potrebbe diminuire l’altezza del div fino ad arrivare a 0. Tuttavia, questo effetto sarebbe molto più facile con JQuery .animate()
  3. 7

    basta aggiungere onclick gestore per il tag di ancoraggio

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

    o cambiare gestore onclick per tag img

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

Lascia un commento